diff --git a/.eslintrc.json b/.eslintrc.json index f85a33242f7..e1f195e65b5 100755 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -79,10 +79,16 @@ ], "overrides": [ { - "files": ["tasks/*", "scripts/*"], + "files": ["scripts/*"], "rules": { "no-console": ["off"] } + }, + { + "files": ["react/**/*.ts"], + "rules": { + "@typescript-eslint/no-explicit-any": "off" + } } ] } diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e7a361d7b7f..1d080556663 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,5 +1 @@ -cem-react-wrapper.config.js @jianliao -scripts/cem-plugin-react-wrappers.js @jianliao -scripts/generate-icon-react-wrapper.js @jianliao -tasks/build-react.js @jianliao -* @adobe/swc-maintainers \ No newline at end of file +* @adobe/swc-maintainers diff --git a/.github/renovate.json b/.github/renovate.json index ecd72157917..b58f8b1168a 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -11,7 +11,7 @@ "labels": ["dependencies"], "packageRules": [ { - "matchPackageNames": ["@spectrum-css/*"], + "matchFileNames": ["@*/*.css"], "labels": ["Spectrum CSS"] }, { diff --git a/tasks/build-preview-urls-comment.js b/.github/scripts/build-preview-urls-comment.js similarity index 100% rename from tasks/build-preview-urls-comment.js rename to .github/scripts/build-preview-urls-comment.js diff --git a/tasks/build-tachometer-comment.js b/.github/scripts/build-tachometer-comment.js similarity index 99% rename from tasks/build-tachometer-comment.js rename to .github/scripts/build-tachometer-comment.js index e111071a17b..c99442b9c12 100644 --- a/tasks/build-tachometer-comment.js +++ b/.github/scripts/build-tachometer-comment.js @@ -11,8 +11,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import fg from 'fast-glob'; import fs from 'fs'; + +import fg from 'fast-glob'; import prettyBytes from 'pretty-bytes'; const getTachometerResults = () => { @@ -156,7 +157,7 @@ export const buildTachometerComment = () => { const firefoxTables = results.firefox.map(buildTable); const chromeBody = chromeTables.length ? chromeTables.join(` - + `) : 'Currently, no packages are changed by this PR...'; const firefoxBody = firefoxTables.length diff --git a/tasks/comment-or-update.js b/.github/scripts/comment-or-update.js similarity index 100% rename from tasks/comment-or-update.js rename to .github/scripts/comment-or-update.js diff --git a/.github/workflows/browser-tests.yml b/.github/workflows/browser-tests.yml index 35db78e9bd1..a6e0a3c3fb9 100644 --- a/.github/workflows/browser-tests.yml +++ b/.github/workflows/browser-tests.yml @@ -93,7 +93,7 @@ jobs: uses: actions/github-script@v7 with: script: | - const { buildTachometerComment } = await import('${{ github.workspace }}/tasks/build-tachometer-comment.js'); + const { buildTachometerComment } = await import('${{ github.workspace }}/.github/scripts/build-tachometer-comment.js'); + const { commentOrUpdate } = await import('${{ github.workspace }}/.github/scripts/comment-or-update.js'); const body = buildTachometerComment(); - const { commentOrUpdate } = await import('${{ github.workspace }}/tasks/comment-or-update.js'); commentOrUpdate(github, context, '## Tachometer results', body); diff --git a/.github/workflows/preview-release.yml b/.github/workflows/preview-release.yml index 89c2d8d15be..82c1c2f5c35 100644 --- a/.github/workflows/preview-release.yml +++ b/.github/workflows/preview-release.yml @@ -30,6 +30,7 @@ jobs: yarn constraints --fix yarn version:update yarn install --refresh-lockfile + - name: Configure NPM for changeset publish env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/urls-smoke-test.yml b/.github/workflows/urls-smoke-test.yml index db0c4d88f4e..6c787884cb5 100644 --- a/.github/workflows/urls-smoke-test.yml +++ b/.github/workflows/urls-smoke-test.yml @@ -39,10 +39,9 @@ jobs: uses: actions/github-script@v7 with: script: | - const { buildPreviewURLComment } = await import('${{ github.workspace }}/tasks/build-preview-urls-comment.js'); + const { buildPreviewURLComment, getDocPreviewURL } = await import('${{ github.workspace }}/.github/scripts/build-preview-urls-comment.js'); + const { commentOrUpdate } = await import('${{ github.workspace }}/.github/scripts/comment-or-update.js'); const body = buildPreviewURLComment(process.env.GITHUB_HEAD_REF); - const { getDocPreviewURL } = await import('${{ github.workspace }}/tasks/build-preview-urls-comment.js'); - const { commentOrUpdate } = await import('${{ github.workspace }}/tasks/comment-or-update.js'); commentOrUpdate(github, context, '## Branch preview', body); playwright-smoke-tests: diff --git a/.gitignore b/.gitignore index efba069794d..b984ed5e1b8 100644 --- a/.gitignore +++ b/.gitignore @@ -31,7 +31,6 @@ custom-elements.json packages/*/src/**/*.css.js packages/*/custom-elements.json packages/**/*.js -packages/**/spectrum-vars.json packages/**/*.js.map packages/**/*.d.ts packages/**/*.test-vrt.ts @@ -50,7 +49,6 @@ projects/**/*.d.ts tools/*/src/**/*.css.js tools/*/custom-elements.json -tools/**/spectrum-vars.json tools/**/*.js tools/**/*.js.map tools/**/*.d.ts diff --git a/.vscode/settings.json b/.vscode/settings.json index df4a284abf3..580c31fe239 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,6 @@ { "files.exclude": { "**/*.css.ts": { "when": "$(basename)" }, - "packages/*/src/spectrum-vars.json": true, "packages/**/*.js.map": true, "packages/**/*.js": { "when": "$(basename).ts" }, "packages/**/*.dev.js": { "when": "$(basename).js" }, diff --git a/PULL_REQUESTS.md b/PULL_REQUESTS.md index 7ed8ce641b9..66db842fbb6 100644 --- a/PULL_REQUESTS.md +++ b/PULL_REQUESTS.md @@ -102,7 +102,6 @@ Incomplete templates may delay the review process. - `breaking-change`: PR contains changes that break backward compatibility - `help-wanted`: Extra attention is needed on this PR - `on-hold`: PR needs more discussion. -- `Spectrum CSS`: An issue or pull request specific to the CSS being used by components. - `Component: [Name]`: PR effects this component - `auto-update`: Keep the base of the PR up-to-date with main automatically if there are no conflicts. diff --git a/README.md b/README.md index cd814cd594b..77e5c874024 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,15 @@ -# Who are we? +# Spectrum Web Components + +## Who are we? Spectrum Web Components is a future-looking project to develop Adobe Spectrum design language based around web components, ES-Modules, and modern browser standards. To this end, Spectrum Web Components only targets _modern_, evergreen browsers that fully implement the Custom Elements V1 specification, e.g. Chrome, Firefox, Safari. Polyfills will be avoided as much as possible but documented if necessary. -# Requirements +## Requirements - NodeJS >= 20.0.0 +- Yarn >= 4.6.0 - Typescript - Supported desktop browsers: - Last 2 versions of Chrome @@ -17,7 +20,7 @@ To this end, Spectrum Web Components only targets _modern_, evergreen browsers t - We support all viewport sizes across supported desktop browsers. - While our components are designed to be responsive and mobile-friendly, we do not yet fully support mobile browsers due to limited testing in mobile hardware. We advise testing updates on mobile devices before updating and are happy to address any reported issues. -# Getting started +## Getting started ```bash git clone https://github.com/adobe/spectrum-web-components.git @@ -29,7 +32,7 @@ The call to `yarn` will install and setup everything you need for developing and Typical development will involve running `yarn storybook`, `yarn test`, and `yarn docs:start` if you're making documentation changes (see below for additional details). -## Building a new component +### Building a new component Creating a new component from the command line can be done by running the following: @@ -37,19 +40,17 @@ Creating a new component from the command line can be done by running the follow yarn new-package ``` -This will scaffold your component's required architecture by prompting you for 2 data points - the desired name for your package and the name of the Spectrum CSS asset from which you will be building. +This will scaffold your component's required architecture by prompting you for the desired name for your package. +```bash ? **SWC package name (i.e. color-area)** +``` _Note_ that your component name should be provided in kebab case and should relate as closely as possible to the Spectrum core naming. -? **Spectrum CSS package name (i.e. colorarea)** - -You can find this information in the [Spectrum CSS GitHub project](https://github.com/adobe/spectrum-css) by finding the component package.json (i.e., `components/accordion/package.json`) +For additional information, please see the [generating components documentation](https://opensource.adobe.com/spectrum-web-components/guides/generating-components). -For additional information, please see the [generating components documentation](https://opensource.adobe.com/spectrum-web-components/guides/generating-components) and capturing the value of the package name: `"name": "@spectrum-css/accordion"`. In this example, that name is `accordion`. _Note_ that the project scope `@spectrum-css` is stripped out of the response. - -# Storybook +## Storybook Testing & reviewing changes can be done using the Storybook instance. Running `yarn storybook` will spin up a local instance of Storybook, triggering the browser to open at completion. From there you can make changes to your code and the browser will automatically refresh. @@ -61,7 +62,7 @@ yarn storybook By default, the resulting site will be available at [http://localhost:8000](http://localhost:8000). -# Documentation +## Documentation The Spectrum Web Components documentation site is available via the following command: @@ -71,40 +72,23 @@ yarn docs:start By default, the resulting site will be available at [http://localhost:8080](http://localhost:8080). +The documentation site provides comprehensive guides, API references, and examples to help you understand and use Spectrum Web Components effectively. It includes: + +- Component API documentation +- Usage guidelines +- Accessibility information +- Code examples +- Design system principles + In the case that you'd like to serve and test a static build of the documentation from the root directory (`localhost` or otherwise), use: ```bash yarn docs:build ``` -# Updating Spectrum CSS - -There are two mechanisms for broadly updating SWC's Spectrum CSS dependencies: +## Spectrum CSS and Icons -- `yarn update:spectrum-css` brings all Spectrum CSS dependencies to 'latest' -- `yarn update:spectrum-css:nonbreaking` brings them to the latest minor or patch version - -We aim to keep Spectrum CSS as current as possible, to track the Spectrum design system closely. -The `:nonbreaking` variant lets us release patch updates quickly in cases where more work is required to be compatible with 'latest.' - -# Advanced development - -There are several commands that can be useful in specific scenarios: - -- `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process. -- `yarn process-icons` to make sure that the most recent icons are included. -- `yarn process-spectrum` to process the spectrum CSS style sources into the individual packages. -- `yarn build` to make sure the available JS has been built from the current TS source. - -## Linting - -The project will be linted on a pre-commit hook, but you can also run the lint suite with `yarn lint`. It uses ESLint to lint the JS / TS files, and StyleLint to lint the CSS files. - -### Dependency linting - -There are downstream issues that can arise from multiple packages in this mono-repo using dependencies with mismatched version strings. By default, [changesets](https://opensource.adobe.com/spectrum-web-components/guides/writing-changesets/) will bump version numbers of internal dependencies when the various packages are published and the depended version is pointing to the latest release, which can help to mitigate this issue. Running `yarn constraints` will check that all version strings for each dependency match across the repo. - -`yarn constraints --fix` will modify the `package.json` files, updating all dependencies to the latest version available in the library — _a potentially dangerous operation_. If this is what you want to do when `yarn constraints` discovers mismatched versions, this step can greatly reduce the amount of work to achieve matching version numbers. +While we've moved away from using Spectrum CSS for component styling, we still maintain a dependency on Spectrum CSS for icons. We aim to keep the icon packages as current as possible to track the Spectrum design system closely. ## Testing @@ -112,100 +96,112 @@ There are downstream issues that can arise from multiple packages in this mono-r Unit tests are run with [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) in Playwright using the Chai, Mocha and Sinon helper libraries. These tests can be executed with: -``` +```bash yarn test ``` During development you may wish to use `yarn test:watch` to automatically build and re-run the test suites. -### Screenshot testing +### Visual regression testing -Note: visual regression is done automatically on pull requests via CircleCI; however, the following outlines how you can run these tests local to your machine. +Visual regressions are tracked via screenshot testing. To run visual regression tests: -Visual regressions are tracked via screenshot testing powered by [`@web/test-runner-visual-regression`](https://github.com/modernweb-dev/web/tree/master/packages/test-runner-visual-regression). Due to the font metrics not being identical, it is difficult to rely on screenshot-based testing across operating systems. Because of this, the library manages its golden image cache internal to CircleCI, rather than as a part of the git repository. Neither the `screenshots-baseline` nor `screenshots-actual` directory should be added to git. When working with visual regression tests locally to manage changes you are making, be sure to create a baseline locally before you begin development (alternatively, you can pull down the main branch to generate the baselines for your in-progress work). +```bash +yarn test:visual +``` -To create a local baseline for comparing your changes to later in the development cycle, use the following: +For testing specific components: ```bash -yarn test:visual:clean # start with a clean slate -# yarn test:visual:clean:baseline # removes only baseline images -# yarn test:visual:clean:current # removes only images updated in the most recent test pass +yarn test:visual vrt-${component name} +# Example: yarn test:visual vrt-accordion +``` -# To enable comparison, it is generally recommended to generate baselines on the main branch. -yarn test:visual vrt-${component name} --update-visual-baseline -eg: yarn test:visual vrt-accordion --update-visual-baseline +For more details about visual regression testing, see the README section on Screenshot Testing. -# Running the tests on the local branch -yarn test:visual vrt-${component name} -eg: yarn test:visual vrt-accordion +### Benchmarking -# Running the tests of light medium ltr -yarn test:visual vrt-${component name}-single -eg: yarn test:visual vrt-accordion-single +You can measure the performance of individual elements with: + +```bash +yarn build:tests +yarn test:bench ``` -#### Screenshot coverage +This will run the defined [Tachometer](https://www.npmjs.com/package/tachometer) tests and report the current runtime cost of each individual element. -Visual regression testing is done against screens derived from the exports of the `*.stories.js` files in each package. As you add packages or story files to existing packages, they will automatically be added to the visual regression suite and will require updating the cache key (outlined below). +## Contributing -#### Keeping CI assets updated +We'd be very grateful if you contributed to the project! Check out our [contribution guidelines](CONTRIBUTING.md) and [pull request best practices](PULL_REQUESTS.md) for more information. -If you find the `visual-*` jobs failing on CircleCI for reasons that you expect (you've updated the Spectrum CSS dependencies, you've added new tests, etc.) then you will need to update the golden images cache key before your build will pass. You can review and share the diffs for a test pass via a URL shaped like `vrt--spectrum-wc.netlify.app/${branchName}`. Before updating the cache key, be sure that the updated caches are both complete (there are times when process errors prevent images from being correctly created or when certain test passes take longer than others) and appear as expected. If you agree with the updated cache content, update the golden images cache key as follows. +### Writing changesets -Your failing branch will have created a new cache with a key of `v1-golden-images-{{ .Revision }}-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.dir >>-{{ epoch }}`. Here `{{ .Revision }}` outlines the git commit hash of the current CI pass. In `.circleci/config.yml`, you will use that to update the cache that is requested at the beginning of the `run-regressions` job. As part of the review site, the git commit hash will be listed in the side navigation UI for easy access, use this number to update the `current_golden_images_hash` paramater that appears as follows: +Spectrum Web Components uses [changesets](https://opensource.adobe.com/spectrum-web-components/guides/writing-changesets/) to manage versioning and changelogs. When making changes that impact users, you should include a changeset file that describes the change and indicates the type of version bump needed (patch, minor, or major). -``` -parameters: - current_golden_images_hash: - type: string - default: ${UPDATE_REVISION_NUMBER_HERE} +To create a changeset: + +```bash +yarn changeset ``` -This will ensure that tests on this branch point to this cache key for at least the next 30 days (keep-alive time of caches on CircleCI). Once the branch is merged to `main`, a cache key of `v2-golden-images-main-<< parameters.regression_color >>-<< parameters.regression_scale >>-<< parameters.regression_dir >>-{{ epoch }}` will be created on each successful build of `main` that will be long-lived and act as the "fallback" once the revision keyed cache has expired. +## Release process -## Benchmarking +For information about our release process, including publishing to NPM, please see our [Release Process documentation](RELEASE_PROCESS.md). -You can acquire current runtimes for the individual elements with: +## Advanced development -``` -yarn build:tests -yarn test:bench -``` +There are several commands that can be useful in specific scenarios: -This will run the defined [Tachometer](https://www.npmjs.com/package/tachometer) tests and report the current runtime cost of each individual element. When not making changes to the benchmarks on your local machine, you can skip `yarn build:tests` for later passes. +- `yarn build:clear-cache` to remove previously created artifacts of the `tsc build` process. +- `yarn process-icons` to make sure that the most recent icons are included. +- `yarn build` to make sure the available JS has been built from the current TS source. + +### Linting + +The project will be linted on a pre-commit hook, but you can also run the lint suite with `yarn lint`. It uses ESLint to lint the JS / TS files, and StyleLint to lint the CSS files. + +#### Dependency linting -## Anatomy of a component +There are downstream issues that can arise from multiple packages in this mono-repo using dependencies with mismatched version strings. By default, [changesets](https://opensource.adobe.com/spectrum-web-components/guides/writing-changesets/) will bump version numbers of internal dependencies when the various packages are published and the depended version is pointing to the latest release, which can help to mitigate this issue. Running `yarn constraints` will check that all version strings for each dependency match across the repo. + +`yarn constraints --fix` will modify the `package.json` files, updating all dependencies to the latest version available in the library — _a potentially dangerous operation_. If this is what you want to do when `yarn constraints` discovers mismatched versions, this step can greatly reduce the amount of work to achieve matching version numbers. + +### Anatomy of a component There is extended documentation on adding a new component to the library in the [documentation site](https://opensource.adobe.com/spectrum-web-components/guides/generating-components). However, at a high level, you will be building the following structure: +```json - packages - - new-component-name + - [new-component-name] - src - index.ts - - new-component-name.css - - new-component-name.ts - - spectrum-config.js - - spectrum-new-component-name.css + - spectrum-[new-component-name].css + - [new-component-name]-overrides.css + - [new-component-name].css + - [NewComponentName].ts - stories - - new-component-name.stories.ts + - [new-component-name].stories.ts + - args.ts + - template.ts - test - benchmark - - test-basic.ts - - new-component-name.test.ts + - basic-test.ts + - [new-component-name].test.ts + - .npmrc + - CHANGELOG.md + - custom-elements.json - package.json - README.md + - sp-[new-component-name].ts - tsconfig.json +``` For a list of component waiting to be implemented, visit our [`missing components`](https://github.com/adobe/spectrum-web-components/labels/missing%20components) tag. -## IDE Notes +### IDE Notes The build process compiles `.css` files using PostCSS and wraps them in the `lit-html` `css` template tag and writes out a `.css.ts` file for easy import into TypeScript files. This file should not be edited, and is ignored by `.gitignore`, but you may also wish to hide the files in your IDE. -# Contributing - -We'd be very grateful if you contributed to the project! Check out our [contribution guidelines](CONTRIBUTING.md) for more information. -
Active patches diff --git a/RELEASE_PROCESS.md b/RELEASE_PROCESS.md index 5262f078338..00c76a0b7fe 100644 --- a/RELEASE_PROCESS.md +++ b/RELEASE_PROCESS.md @@ -2,22 +2,22 @@ Users with permissions in the `@spectrum-web-components` organization on NPM can follow these steps to create and publish a new version. -- [Prerequisites](#prerequisites) - - [Main successfully builds](#main-successfully-builds) - - [The correct version of Node is installed](#the-correct-version-of-node-is-installed) - - [Using Node Version Manager](#using-node-version-manager) - - [Manually checking](#manually-checking) - - [Troubleshooting](#troubleshooting) - - [Github Token is set up](#github-token-is-set-up) - - [Generate a Github token](#generate-a-github-token) - - [Logged in to NPM](#logged-in-to-npm) - - [NPM 2FA authenticator app](#npm-2fa-authenticator-app) -- [Releasing to NPM — the good stuff](#releasing-to-npm--the-good-stuff) - - [Troubleshooting](#troubleshooting-1) -- [Publishing the documentation site manually](#publishing-the-documentation-site-manually) - - [From GitHub](#from-github) - - [From the terminal](#from-the-terminal) - - [References](#references) +- [Prerequisites](#prerequisites) + - [Main successfully builds](#main-successfully-builds) + - [The correct version of Node is installed](#the-correct-version-of-node-is-installed) + - [Using Node Version Manager](#using-node-version-manager) + - [Manually checking](#manually-checking) + - [Troubleshooting](#troubleshooting) + - [Github Token is set up](#github-token-is-set-up) + - [Generate a Github token](#generate-a-github-token) + - [Logged in to NPM](#logged-in-to-npm) + - [NPM 2FA authenticator app](#npm-2fa-authenticator-app) +- [Releasing to NPM — the good stuff](#releasing-to-npm--the-good-stuff) + - [Troubleshooting](#troubleshooting-1) +- [Publishing the documentation site manually](#publishing-the-documentation-site-manually) + - [From GitHub](#from-github) + - [From the terminal](#from-the-terminal) + - [References](#references) ## Prerequisites @@ -94,13 +94,13 @@ If not logged in, run `npm login` to sign in to your account. 1. In your IDE search `': major` , `': minor`, `': patch` , based on the results in the order of this search list, the highest level takes precedence 1. exclude files: `.changeset/README.md` 4. Open your authenticator app to have it ready -5. Run`yarn changeset-publish` +5. Run`yarn publish:changeset` 6. Enter the one-time password from your authenticator for NPM. 1. Wait for a fresh password; a stale timer might cause issues. 7. After the SWC packages are released, the React Wrapper packages will be generated. 1. This multi-phase approach ensures that the wrapped packages share the same version as the standard packages. 8. Enter a new one-time password from your authenticator for NPM. -9. The `yarn changeset-publish` command will automatically commit the changes to main with a commit message of `chore: release new versions #publish` +9. The `yarn publish:changeset` command will automatically commit the changes to main with a commit message of `chore: release new versions #publish` 1. The docs site will publish automatically if the `#publish` string is included in the commit message and the check suite runs successfully. 10. Confirm the build on `main` passes @@ -108,8 +108,8 @@ If not logged in, run `npm login` to sign in to your account. If publishing fails with an error: -- Check the [list of tags](https://github.com/adobe/spectrum-web-components/tags) to see if new tags have been released for your publishing attempt. -- If they were, run `yarn changeset-publish` again. +- Check the [list of tags](https://github.com/adobe/spectrum-web-components/tags) to see if new tags have been released for your publishing attempt. +- If they were, run `yarn publish:changeset` again. --- diff --git a/cem-react-wrapper.config.js b/cem-react-wrapper.config.js index d5d46f396f6..17ff63cb247 100644 --- a/cem-react-wrapper.config.js +++ b/cem-react-wrapper.config.js @@ -10,12 +10,17 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import reactWrapperPlugin from './scripts/cem-plugin-react-wrapper.js'; -import defineElementPlugin from './scripts/define-element-plugin.js'; import { readFileSync } from 'fs'; -import { resolve } from 'path'; +import { dirname, join } from 'path'; +import { fileURLToPath } from 'url'; + import yaml from 'js-yaml'; +import defineElementPlugin from './scripts/define-element-plugin.js'; +import reactWrapperPlugin from './scripts/cem-plugin-react-wrapper.js'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + export default { globs: ['**/sp-*.ts', '**/overlay-trigger.ts', '**/src/[A-Z]*.ts'], exclude: [ @@ -26,16 +31,15 @@ export default { 'node_modules/*', '**/*.dev.*', ], - outdir: '.', litelement: true, packagejson: false, plugins: [ defineElementPlugin(), reactWrapperPlugin({ exclude: ['StoryDecorator', 'TooltipOpenable'], - outDir: '../../react', + outDir: join(__dirname, 'react'), prettierConfig: yaml.load( - readFileSync(resolve('../../.prettierrc.yaml')) + readFileSync(join(__dirname, '.prettierrc.yaml')) ), }), ], diff --git a/package.json b/package.json index 79534c9c82c..9a06e2253a5 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,10 @@ "analyze": "lit-analyzer \"{packages,tools}/*/src/**/!(*.css).ts\"", "build": "wireit", "build:clear-cache": "rimraf packages/*/tsconfig.tsbuildinfo && rimraf tools/*/tsconfig.tsbuildinfo", - "build:component-inventory": "node ./tasks/build-component-inventory.js", - "build:confirm": "node ./tasks/confirm-build.js", + "build:confirm": "node ./scripts/confirm-build.js", "build:css": "wireit", "build:css:watch": "wireit", - "build:react": "yarn gen-react-wrapper && node ./tasks/build-react.js && yarn tsc --build tsconfig-react-wrapper.json", + "build:react": "rimraf react && node ./scripts/build-react.js && tsc --build tsconfig-react-wrapper.json", "build:tests": "tsc --build test/tsconfig.json && tsc --build test/tsconfig-node.json", "build:ts": "wireit", "build:ts:watch": "wireit", @@ -25,8 +24,7 @@ "changeset-publish": "yarn prepublishOnly && yarn changeset version && yarn constraints --fix && yarn install --refresh-lockfile && yarn version:update && yarn changeset publish --no-git-tag && yarn push-to-remote && yarn create-git-tag && yarn postpublish", "changeset-snapshot-publish": "yarn prepublishOnly && yarn changeset version --snapshot snapshot && yarn constraints --fix && yarn install --refresh-lockfile && yarn version:update && yarn changeset publish --no-git-tag --tag snapshot", "chromatic": "chromatic --build-script-name storybook:build # note that --project-token must be set in your env variables", - "create-git-tag": "node --no-warnings tasks/create-git-tag.js", - "custom-element-json": "node tasks/custom-element-json.js", + "custom-element-json": "node ./scripts/custom-element-json.js", "docs:analyze": "cem analyze --globs \"packages/**/*.ts\" --exclude \"**/*.d.ts\" --exclude \"**/stories/**\" --exclude \"**/icons/**\" --exclude \"**/elements/**\" --outdir projects/documentation --litelement", "docs:build": "yarn workspace documentation build", "docs:ci": "yarn docs:analyze && run-p docs:production storybook:build && cp projects/documentation/custom-elements.json projects/documentation/dist/storybook", @@ -35,29 +33,24 @@ "docs:review": "alex packages/**/*.md", "docs:start": "yarn workspace documentation serve --watch", "find": "test -f custom-elements.json", - "gen-react-wrapper": "node ./tasks/gen-react-wrapper.js", "icons": "wireit", "icons:ui": "wireit", "icons:workflow": "wireit", "lint": "git status --porcelain && git add . && lint-staged --allow-empty", - "new-package": "cd projects/templates && plop", - "postcustom-element-json": "node ./tasks/run-check-cem.js", - "postdocs:analyze": "node ./scripts/add-custom-properties.js --src=\"projects/documentation/custom-elements.json\"", + "new-package": "yarn workspace swc-templates plop", "postinstall": "husky || true && patch-package", "postpack": "pinst --enable", "postpublish": "yarn prepublish:react && yarn publish:react && yarn postpublish:react", "postpublish:react": "git reset --hard HEAD^ && git prune && rimraf react", - "precustom-element-json": "node tasks/remove-custom-elements-json.js", "preeleventy": "yarn docs:analyze", "prepack": "pinst --disable", "prepublish:react": "yarn build:react && sed -i \"\" \"s/react/# react/g\" .gitignore && git commit -am \"Commit React Wrappers\" --no-verify", - "prepublishOnly": "rimraf react && yarn build && yarn custom-element-json && yarn verify-build-artifacts && yarn build:confirm", + "prepublishOnly": "rimraf react && yarn build && yarn custom-element-json && yarn build:confirm", "prestorybook": "wireit", "prestorybook:build": "cem analyze --outdir storybook/", "pretest:bench": "yarn build:tests && test -f test/benchmark/cli.js ||:", "pretest:visual": "yarn build && yarn build", "process-icons": "wireit", - "process-spectrum": "wireit", "publish:react": "yarn changeset publish --no-git-tag --tag snapshot --no-push", "push-to-remote": "git add . && git commit -m \"chore: release new versions #publish\" && git push", "start": "yarn storybook", @@ -67,7 +60,7 @@ "storybook:run": "web-dev-server --config wds-storybook.config.js", "test": "yarn test:focus unit", "test:bench": "yarn build:tests && node test/benchmark/cli.js", - "test:changed": "node ./tasks/test-changes.js", + "test:changed": "node ./scripts/test-changes.js", "test:ci": "yarn test:start", "test:create": "wireit", "test:errors": "yarn test | grep -A 32 ❌", @@ -81,10 +74,6 @@ "test:watch": "yarn test:watch:focus unit", "test:watch:flags:focus": "yarn build && run-p build:watch \"test:start --watch --group {1} --config web-test-runner.config.ci-chromium-flags.js\" --", "test:watch:focus": "yarn build && run-p build:watch \"test:start --watch --group {1}\" --", - "update:spectrum-css": "node ./scripts/update-spectrum-css.js --latest || yarn update:spectrum-css:cleanup", - "update:spectrum-css:cleanup": "yarn --ignore-scripts && yarn process-spectrum && yarn lint", - "update:spectrum-css:nonbreaking": "node ./scripts/update-spectrum-css.js || yarn update:spectrum-css:cleanup", - "verify-build-artifacts": "node ./scripts/verify-build-artifacts.js", "version:update": "genversion --verbose --semi --esm ./tools/base/src/version.js", "vrt:preview": "yarn wds --config test/visual/wds-vrt.config.js", "vrt:quick-link": "yarn netlify deploy --alias=vrt --dir=projects/vrt-quick-link" @@ -104,7 +93,7 @@ "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.0.1", "@rollup/plugin-node-resolve": "^15.2.3", - "@sindresorhus/slugify": "^2.1.1", + "@sindresorhus/slugify": "^2.2.1", "@spectrum-web-components/eslint-plugin": "file:./linters/eslint", "@storybook/addon-a11y": "^8.6.12", "@storybook/addon-designs": "^8.2.1", @@ -145,6 +134,7 @@ "chromedriver": "^136.0.0", "colors": "^1.4.0", "common-tags": "^1.8.2", + "crypto": "^1.0.1", "custom-elements-manifest": "^2.0.0", "debounce": "^2.0.0", "deepmerge": "^4.2.2", @@ -159,7 +149,7 @@ "eslint-plugin-require-extensions": "^0.1.3", "eslint-plugin-storybook": "^0.8.0", "express": "^4.16.4", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.3", "fs-extra": "^11.1.1", "geckodriver": "^4.3.0", "genversion": "^3.1.1", @@ -181,9 +171,9 @@ "pinst": "^3.0.0", "prettier": "^3.5.3", "prettier-plugin-package": "^1.3.0", - "pretty-bytes": "^6.1.1", + "pretty-bytes": "^7.0.0", "re-template-tag": "^2.0.1", - "rimraf": "^5.0.1", + "rimraf": "^6.0.1", "rollup": "^4.12.0", "sinon": "^17.0.1", "storybook": "^8.6.12", @@ -200,19 +190,16 @@ }, "wireit": { "build:css:watch": { - "command": "node ./tasks/watch-css.js", + "command": "node ./scripts/watch-css.js", "service": true }, "build:css": { - "command": "node ./tasks/build-css.js", - "dependencies": [ - "process-spectrum" - ], + "command": "node ./scripts/build-css.js", "files": [ "packages/**/*.css", "tools/**/*.css", - "tasks/build-css.js", - "tasks/css-tools.js" + "scripts/build-css.js", + "scripts/css-tools.js" ], "output": [ "packages/**/*.css.ts", @@ -221,11 +208,11 @@ "clean": "if-file-deleted" }, "build:ts:watch": { - "command": "node ./tasks/watch-packages.js", + "command": "node ./scripts/watch-ts.js", "service": true }, "build:ts": { - "command": "node ./tasks/esbuild-packages.js", + "command": "node ./scripts/build-ts.js", "dependencies": [ "process-icons", "test:create", @@ -243,8 +230,7 @@ "!projects/templates/**/*", "tools/**/*.ts", "!tools/**/*.d.ts", - "tasks/esbuild-packages.js", - "tasks/ts-tools.js", + "scripts/build-ts.js", "packages/**/exports.json", "tools/**/exports.json" ], @@ -261,8 +247,6 @@ "!projects/templates", "tools/**/*.js", "tools/**/*.js.map", - "!**/spectrum-config.js", - "!**/spectrum-config.v1.js", "!**/build.js", "!**/build-icons-mapping.js", "test/**/*.js", @@ -378,33 +362,6 @@ "icons:workflow" ] }, - "process-spectrum": { - "command": "node ./scripts/spectrum-vars.js && node ./tasks/process-spectrum.js && node ./scripts/generate-tokens.js && yarn lint", - "files": [ - "tasks/process-spectrum.js", - "packages/**/spectrum-config.js", - "tools/**/spectrum-config.js", - "node_modules/@spectrum-css/**/index-vars.css", - "scripts/generate-tokens.js", - "scripts/generate-tokens-wrapper.js", - "node_modules/@spectrum-css/**/*.css", - "scripts/spectrum-vars.js", - "tools/styles/package.json", - ".prettierrc.yaml", - ".stylelintrc.json" - ], - "output": [ - "packages/*/src/spectrum-*.css", - "tools/*/src/spectrum-*.css", - "tools/styles/*.css", - "tools/styles/express/*.css", - "!tools/styles/scale-*.css", - "!tools/styles/theme-*.css", - "!tools/styles/express/scale-*.css", - "!tools/styles/express/theme-*.css" - ], - "clean": false - }, "storybook": { "command": "storybook dev -p 8080 -c storybook", "service": true, diff --git a/packages/.eslintrc.json b/packages/.eslintrc.json index 351bc9848da..4dc758eae86 100644 --- a/packages/.eslintrc.json +++ b/packages/.eslintrc.json @@ -93,7 +93,8 @@ "rules": { "@spectrum-web-components/document-active-element": ["off"], "lit-a11y/no-autofocus": ["off"], - "lit-a11y/tabindex-no-positive": ["off"] + "lit-a11y/tabindex-no-positive": ["off"], + "import/no-extraneous-dependencies": ["off"] } }, { diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 32e66b32065..8f63b92f97c 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -80,9 +80,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/accordion": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/accordion/src/spectrum-config.js b/packages/accordion/src/spectrum-config.js deleted file mode 100644 index 57097ff6bfe..00000000000 --- a/packages/accordion/src/spectrum-config.js +++ /dev/null @@ -1,163 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Accordion'); -const converterItem = converterFor('spectrum-Accordion-item'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/accordion', - outPackage: 'accordion', - fileName: 'accordion', - excludeByComponents: [ - builder.class('spectrum-Accordion-item'), - builder.class('spectrum-Accordion-itemIndicator'), - builder.class('spectrum-Accordion-itemIconContainer'), - builder.class('spectrum-Accordion-itemHeading'), - builder.class('spectrum-Accordion-itemHeader'), - builder.class('spectrum-Accordion-itemContent'), - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-Accordion--compact', 'compact'], - ['spectrum-Accordion--spacious', 'spacious'], - ], - 'density' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Accordion--sizeS', 's'], - ['spectrum-Accordion--sizeL', 'l'], - ['spectrum-Accordion--sizeXL', 'xl'], - ], - 'size' - ), - ], - }, - { - inPackage: '@spectrum-css/accordion', - outPackage: 'accordion', - fileName: 'accordion-item', - excludeByComponents: [ - builder.class('spectrum-Accordion'), - builder.class('spectrum-Accordion--compact'), - builder.class('spectrum-Accordion--spacious'), - builder.class('spectrum-Accordion--sizeS'), - builder.class('spectrum-Accordion--sizeL'), - builder.class('spectrum-Accordion--sizeXL'), - ], - components: [ - converterItem.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToId( - 'spectrum-Accordion-itemHeading', - 'heading' - ), - converter.classToId('spectrum-Accordion-itemHeader', 'header'), - converter.classToId( - 'spectrum-Accordion-itemContent', - 'content' - ), - converter.classToClass( - 'spectrum-Accordion-itemIconContainer', - 'iconContainer' - ), - converter.classToClass( - 'spectrum-Accordion-itemIndicator', - 'indicator' - ), - { - find: builder.pseudoClass('first-of-type'), - replace: builder.pseudoClass('first-of-type'), - hoist: true, - }, - { - find: builder.pseudoClass('first-child'), - replace: builder.pseudoClass('first-child'), - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'first-of-type', - }, - ], - ], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'first-of-type', - }, - ], - ], - }, - hoist: true, - }, - { - find: [ - builder.class('spectrum-Accordion-itemHeader'), - builder.pseudoClass('hover'), - ], - replace: [ - { - replace: builder.id('header'), - }, - { - replace: builder.pseudoClass('hover'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Accordion-itemHeader'), - builder.pseudoClass('focus'), - ], - replace: [ - { - replace: builder.id('header'), - }, - { - replace: builder.pseudoClass('focus'), - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json index b63318b7894..af4d9832ad7 100644 --- a/packages/action-bar/package.json +++ b/packages/action-bar/package.json @@ -70,9 +70,6 @@ "@spectrum-web-components/field-label": "1.6.0", "@spectrum-web-components/popover": "1.6.0" }, - "devDependencies": { - "@spectrum-css/actionbar": "10.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/action-bar/src/spectrum-config.js b/packages/action-bar/src/spectrum-config.js deleted file mode 100644 index e853e02e8da..00000000000 --- a/packages/action-bar/src/spectrum-config.js +++ /dev/null @@ -1,48 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ActionBar'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/actionbar', - outPackage: 'action-bar', - fileName: 'action-bar', - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-ActionBar--flexible'), - converter.classToAttribute('spectrum-ActionBar--emphasized'), - converter.classToClass('spectrum-CloseButton', 'close-button'), - converter.classToClass('spectrum-ActionGroup', 'action-group'), - converter.classToClass('spectrum-FieldLabel', 'field-label'), - ...converter.enumerateAttributes( - [ - ['spectrum-ActionBar--sticky'], - ['spectrum-ActionBar--fixed'], - ], - 'variant' - ), - converter.classToId('spectrum-ActionBar-popover'), - ], - }, - ], -}; - -export default config; diff --git a/packages/action-button/package.json b/packages/action-button/package.json index f36b2cb8802..cdff9b0b3af 100644 --- a/packages/action-button/package.json +++ b/packages/action-button/package.json @@ -70,9 +70,6 @@ "@spectrum-web-components/icons-ui": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/action-button/src/spectrum-config.js b/packages/action-button/src/spectrum-config.js deleted file mode 100644 index 829543400ea..00000000000 --- a/packages/action-button/src/spectrum-config.js +++ /dev/null @@ -1,270 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ActionButton'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/actionbutton', - outPackage: 'action-button', - fileName: 'action-button', - systemOverrides: true, - excludeByComponents: [ - { - type: 'type', - name: 'a', - }, - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-ActionButton--quiet'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.pseudoToAttribute('disabled', 'disabled'), - converter.classToAttribute('is-selected', 'selected'), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('is-active', 'active'), - converter.classToAttribute('spectrum-ActionButton--emphasized'), - ...converter.enumerateAttributes( - [ - ['spectrum-ActionButton--staticWhite', 'white'], - ['spectrum-ActionButton--staticBlack', 'black'], - ], - 'static-color' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ActionButton--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ActionButton--sizeXS', 'xs'], - ['spectrum-ActionButton--sizeS', 's'], - ['spectrum-ActionButton--sizeL', 'l'], - ['spectrum-ActionButton--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass( - 'spectrum-ActionButton-hold', - 'hold-affordance' - ), - converter.classToClass( - 'spectrum-ActionButton-holdIcon', - 'hold-affordance' - ), - converter.classToId('spectrum-ActionButton-label'), - converter.classToSlotted('spectrum-ActionButton-icon', 'icon'), - { - find: [ - builder.class('spectrum-ActionButton-icon'), - builder.pseudoClass('only-child'), - ], - replace: [ - { - replace: builder.attribute('icon-only'), - hoist: false, - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'attribute', - name: 'slot', - operation: { - operator: 'equal', - value: 'icon', - }, - }, - ], - }, - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionButton-icon'), - builder.combinator('+'), - builder.class('spectrum-ActionButton-label'), - ], - replace: [ - { - replace: { - type: 'attribute', - name: 'name', - operation: { - operator: 'equal', - value: 'icon', - }, - }, - hoist: false, - }, - { - replace: builder.combinator('+'), - }, - { - replace: builder.id('label'), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionButton-hold'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'dir', - operation: { - value: 'rtl', - operator: 'equal', - }, - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('hold-affordance'), - }, - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'disabled', - }, - ], - ], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'disabled', - }, - ], - ], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'class', - name: 'spectrum-ActionButton--staticBlack', - }, - ], - [ - { - type: 'class', - name: 'spectrum-ActionButton--staticWhite', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - type: 'attribute', - name: 'static-color', - operation: { - operator: 'equal', - value: 'black', - }, - }, - ], - [ - { - type: 'attribute', - name: 'static-color', - operation: { - operator: 'equal', - value: 'white', - }, - }, - ], - ], - }, - hoist: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/action-group/package.json b/packages/action-group/package.json index 9b9cada5f7d..e0f50ca2348 100644 --- a/packages/action-group/package.json +++ b/packages/action-group/package.json @@ -70,9 +70,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/reactive-controllers": "1.6.0" }, - "devDependencies": { - "@spectrum-css/actiongroup": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/action-group/src/action-group.css b/packages/action-group/src/action-group.css index eef079c0a6c..621cc40c4ab 100644 --- a/packages/action-group/src/action-group.css +++ b/packages/action-group/src/action-group.css @@ -18,20 +18,11 @@ governing permissions and limitations under the License. --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); } -/** - * The following styles corrects issues found in the Spectrum CSS output - * that are tracked via: https://github.com/adobe/spectrum-css/issues/795 - */ - :host([dir][compact][vertical]) ::slotted(:nth-child(n)) { margin-right: 0; margin-left: 0; } -/** - * End Spectrum CSS #795 fixes. - */ - /** * The following styles correct realities outlined in https://github.com/adobe/spectrum-web-components/issues/1434 */ diff --git a/packages/action-group/src/spectrum-config.js b/packages/action-group/src/spectrum-config.js deleted file mode 100644 index 42dce8fdc01..00000000000 --- a/packages/action-group/src/spectrum-config.js +++ /dev/null @@ -1,231 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ActionGroup'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/actiongroup', - outPackage: 'action-group', - fileName: 'action-group', - excludeByComponents: [ - builder.class('spectrum-ActionButton-label'), - builder.class('🤫'), - ], - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-ActionGroup--vertical'), - converter.classToAttribute('spectrum-ActionGroup--compact'), - converter.classToAttribute('spectrum-ActionGroup--quiet'), - converter.classToAttribute('spectrum-ActionGroup--justified'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ActionGroup--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ActionGroup--sizeXS', 'xs'], - ['spectrum-ActionGroup--sizeS', 's'], - ['spectrum-ActionGroup--sizeL', 'l'], - ['spectrum-ActionGroup--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToSlotted('spectrum-ActionGroup-item'), - converter.notToAttribute('spectrum-ActionGroup--vertical'), - converter.notToAttribute('spectrum-ActionGroup--compact'), - converter.notToAttribute('spectrum-ActionGroup--quiet'), - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.class('is-selected'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.attribute('selected')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.pseudoClass('hover'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('hover')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.pseudoClass('focus-visible'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.pseudoClass('focus-visible'), - ], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.pseudoClass('last-child'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('last-child')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.pseudoClass('first-child'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('first-child')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-ActionGroup-item'), - builder.combinator('+'), - builder.class('spectrum-ActionGroup-item'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - builder.pseudoClass( - 'first-child' - ), - ], - ], - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'class', - name: 'spectrum-ActionGroup--vertical', - }, - ], - [ - { - type: 'class', - name: 'spectrum-ActionGroup--compact', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - type: 'attribute', - name: 'vertical', - operation: { - operator: 'equal', - value: 'true', - }, - }, - { - type: 'attribute', - name: 'compact', - operation: { - operator: 'equal', - value: 'true', - }, - }, - ], - ], - }, - hoist: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index e5179b95c2b..e4c39f85b15 100644 --- a/packages/action-menu/package.json +++ b/packages/action-menu/package.json @@ -74,9 +74,6 @@ "@spectrum-web-components/picker": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/actionmenu": "7.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/alert-banner/package.json b/packages/alert-banner/package.json index e7b64b08093..1555c6ebd7d 100644 --- a/packages/alert-banner/package.json +++ b/packages/alert-banner/package.json @@ -68,9 +68,6 @@ "@spectrum-web-components/button": "1.6.0", "@spectrum-web-components/icons-workflow": "1.6.0" }, - "devDependencies": { - "@spectrum-css/alertbanner": "3.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/alert-banner/src/spectrum-config.js b/packages/alert-banner/src/spectrum-config.js deleted file mode 100644 index 5f2c2104c80..00000000000 --- a/packages/alert-banner/src/spectrum-config.js +++ /dev/null @@ -1,49 +0,0 @@ -/* -Copyright 2024 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -// @ts-check - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-AlertBanner'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/alertbanner', - outPackage: 'alert-banner', - fileName: 'alert-banner', - systemOverrides: true, - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - ...converter.enumerateAttributes( - [ - ['spectrum-AlertBanner--info'], - ['spectrum-AlertBanner--negative'], - ], - 'variant' - ), - converter.classToClass('spectrum-AlertBanner-body'), - converter.classToClass('spectrum-AlertBanner-content'), - converter.classToClass('spectrum-AlertBanner-text'), - converter.classToSlotted('spectrum-Button', 'action'), - converter.classToClass('spectrum-AlertBanner-end'), - converter.classToClass('spectrum-AlertBanner-icon', 'type'), - ], - }, - ], -}; - -export default config; diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json index 4d754c89e48..781a8d01a33 100644 --- a/packages/alert-dialog/package.json +++ b/packages/alert-dialog/package.json @@ -72,9 +72,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/alertdialog": "4.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/alert-dialog/src/spectrum-config.js b/packages/alert-dialog/src/spectrum-config.js deleted file mode 100644 index f774c6a44f3..00000000000 --- a/packages/alert-dialog/src/spectrum-config.js +++ /dev/null @@ -1,52 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -// @ts-check - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-AlertDialog'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/alertdialog', - outPackage: 'alert-dialog', - fileName: 'alert-dialog', - components: [ - converter.classToHost(), - ...converter.enumerateAttributes( - [ - ['spectrum-AlertDialog--error'], - ['spectrum-AlertDialog--warning'], - ], - 'variant' - ), - converter.classToClass('spectrum-AlertDialog-header', 'header'), - converter.classToSlotted( - 'spectrum-AlertDialog-heading', - 'heading' - ), - converter.classToClass( - 'spectrum-AlertDialog-content', - 'content' - ), - converter.classToClass('spectrum-AlertDialog-grid', 'grid'), - converter.classToClass('spectrum-Icon', 'icon'), - ], - }, - ], -}; - -export default config; diff --git a/packages/asset/package.json b/packages/asset/package.json index f69fb6b7b4e..737672a568d 100644 --- a/packages/asset/package.json +++ b/packages/asset/package.json @@ -66,9 +66,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/asset": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/asset/src/spectrum-config.js b/packages/asset/src/spectrum-config.js deleted file mode 100644 index 8275554155a..00000000000 --- a/packages/asset/src/spectrum-config.js +++ /dev/null @@ -1,41 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Asset'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/asset', - outPackage: 'asset', - fileName: 'asset', - components: [ - converter.classToHost(), - converter.classToSlotted('spectrum-Asset-image'), - converter.classToClass('spectrum-Asset-file'), - converter.classToClass('spectrum-Asset-folder'), - converter.classToClass('spectrum-Asset-folderBackground'), - converter.classToClass('spectrum-Asset-fileBackground'), - converter.classToClass('spectrum-Asset-fileOutline'), - converter.classToClass('spectrum-Asset-folderOutline'), - ], - }, - ], -}; - -export default config; diff --git a/packages/avatar/package.json b/packages/avatar/package.json index f243764b2cb..b124c748efe 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/avatar": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/avatar/src/spectrum-config.js b/packages/avatar/src/spectrum-config.js deleted file mode 100644 index 8de612bc2d7..00000000000 --- a/packages/avatar/src/spectrum-config.js +++ /dev/null @@ -1,52 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Avatar'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/avatar', - outPackage: 'avatar', - fileName: 'avatar', - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - converter.notToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-Avatar--size50', '50'], - ['spectrum-Avatar--size75', '75'], - ['spectrum-Avatar--size100', '100'], - ['spectrum-Avatar--size200', '200'], - ['spectrum-Avatar--size300', '300'], - ['spectrum-Avatar--size400', '400'], - ['spectrum-Avatar--size500', '500'], - ['spectrum-Avatar--size600', '600'], - ['spectrum-Avatar--size700', '700'], - ], - 'size' - ), - converter.classToClass('spectrum-Avatar-image'), - converter.classToClass('spectrum-Avatar-link'), - ], - }, - ], -}; - -export default config; diff --git a/packages/badge/package.json b/packages/badge/package.json index eeae849a8e2..354e66f0604 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/badge": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/badge/src/spectrum-config.js b/packages/badge/src/spectrum-config.js deleted file mode 100644 index f328de60f94..00000000000 --- a/packages/badge/src/spectrum-config.js +++ /dev/null @@ -1,149 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Badge'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/badge', - outPackage: 'badge', - fileName: 'badge', - excludeByComponents: [ - { - type: 'pseudo-class', - kind: 'hover', - }, - ], - components: [ - converter.classToHost(), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Badge--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Badge--sizeS', 's'], - ['spectrum-Badge--sizeL', 'l'], - ['spectrum-Badge--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - // semantic - ['spectrum-Badge--accent'], - ['spectrum-Badge--positive'], - ['spectrum-Badge--informative'], - ['spectrum-Badge--negative'], - ['spectrum-Badge--neutral'], - ['spectrum-Badge--notice'], - // non-semantic - ['spectrum-Badge--seafoam'], - ['spectrum-Badge--indigo'], - ['spectrum-Badge--purple'], - ['spectrum-Badge--fuchsia'], - ['spectrum-Badge--magenta'], - ['spectrum-Badge--yellow'], - ['spectrum-Badge--gray'], - ['spectrum-Badge--red'], - ['spectrum-Badge--orange'], - ['spectrum-Badge--chartreuse'], - ['spectrum-Badge--celery'], - ['spectrum-Badge--green'], - ['spectrum-Badge--cyan'], - ['spectrum-Badge--blue'], - ], - 'variant' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Badge--fixed-inline-start', 'inline-start'], - ['spectrum-Badge--fixed-inline-end', 'inline-end'], - ['spectrum-Badge--fixed-block-start', 'block-start'], - ['spectrum-Badge--fixed-block-end', 'block-end'], - ], - 'fixed' - ), - ...converter.enumerateAttributes( - [['spectrum-Badge--black-text', 'black']], - 'static-color' - ), - converter.classToClass('spectrum-Badge-label'), - converter.classToSlotted('spectrum-Badge-icon', 'icon'), - { - find: [ - { - type: 'class', - name: 'spectrum-Badge-icon--no-label', - }, - ], - replace: [ - { - replace: { - type: 'attribute', - name: 'icon-only', - }, - hoist: false, - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'universal', - }, - ], - }, - }, - ], - }, - { - find: [ - { - type: 'class', - name: 'spectrum-Badge-icon', - }, - { - type: 'combinator', - value: 'next-sibling', - }, - { - type: 'class', - name: 'spectrum-Badge-label', - }, - ], - replace: [ - { - replace: { - type: 'attribute', - name: 'name', - operation: { - operator: 'equal', - value: 'icon', - }, - }, - hoist: false, - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index bf042ee680b..b4408cc8061 100644 --- a/packages/breadcrumbs/package.json +++ b/packages/breadcrumbs/package.json @@ -79,9 +79,6 @@ "@spectrum-web-components/link": "1.6.0", "@spectrum-web-components/menu": "1.6.0" }, - "devDependencies": { - "@spectrum-css/breadcrumb": "11.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/breadcrumbs/src/spectrum-config.js b/packages/breadcrumbs/src/spectrum-config.js deleted file mode 100644 index db4ab95f2fb..00000000000 --- a/packages/breadcrumbs/src/spectrum-config.js +++ /dev/null @@ -1,211 +0,0 @@ -/* -Copyright 2024 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -// @ts-check - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Breadcrumbs'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/breadcrumb', - outPackage: 'breadcrumbs', - fileName: 'breadcrumbs', - hoistCustomPropertiesFrom: 'spectrum-Breadcrumbs', - excludeByComponents: [ - builder.class('spectrum-Breadcrumbs-itemSeparator'), - builder.class('spectrum-Breadcrumbs-itemLink'), - builder.class('spectrum-Breadcrumbs-item'), - ], - includeByWholeSelector: [ - /* .spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item */ - [ - builder.class('spectrum-Breadcrumbs--compact'), - builder.combinator(' '), - builder.class('spectrum-Breadcrumbs-item'), - ], - /* .spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type */ - [ - builder.class('spectrum-Breadcrumbs--compact'), - builder.combinator(' '), - builder.class('spectrum-Breadcrumbs-item'), - builder.pseudoClass('last-of-type'), - ], - ], - components: [ - converter.classToId('spectrum-Breadcrumbs', 'list'), - converter.classToAttribute('spectrum-Breadcrumbs--compact'), - { - find: [builder.class('spectrum-Breadcrumbs-item')], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-breadcrumb-item'), - ], - }, - }, - ], - }, - { - find: [builder.class('spectrum-Breadcrumbs--compact')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('compact')], - }, - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.id('list'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Breadcrumbs-item'), - builder.pseudoClass('last-of-type'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('last-of-type')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - ], - }, - { - inPackage: '@spectrum-css/breadcrumb', - outPackage: 'breadcrumbs', - fileName: 'breadcrumbs-item', - excludeByComponents: [ - builder.class('spectrum-Breadcrumbs'), - builder.class('spectrum-Breadcrumbs--compact'), - builder.class('spectrum-Breadcrumbs--multiline'), - ], - components: [ - converter.classToHost('spectrum-Breadcrumbs-item'), - { - find: builder.pseudoClass('first-of-type'), - replace: builder.pseudoClass('first-of-type'), - hoist: true, - }, - { - find: [ - builder.class('spectrum-Accordion-itemHeader'), - builder.pseudoClass('hover'), - ], - replace: [ - { - replace: builder.id('header'), - }, - { - replace: builder.pseudoClass('hover'), - }, - ], - }, - { - find: [builder.pseudoClass('last-of-type')], - replace: [ - // :host(:not(.is-menu):last-of-type) - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-menu')]], - }, - hoist: true, - }, - { - replace: builder.pseudoClass('last-of-type'), - hoist: true, - }, - ], - hoist: true, - }, - converter.classToId( - 'spectrum-Breadcrumbs-itemSeparator', - 'separator' - ), - converter.classToId( - 'spectrum-Breadcrumbs-itemLink', - 'item-link' - ), - { - find: [builder.class('spectrum-ActionButton')], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.element('sp-action-menu')], - }, - }, - ], - }, - { - collapseSelector: true, - find: [ - builder.class('spectrum-ActionButton'), - builder.pseudoClass('disabled'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-action-menu'), - builder.attribute('disabled'), - ], - }, - }, - ], - }, - // :host([href]) -> #item-link[href] - { - hoist: false, - find: builder.attribute('href'), - replace: builder.attribute('href'), - }, - // :host([tabindex="0"]) -> #item-link[tabindex="0"] - { - hoist: false, - find: builder.attribute('tabindex'), - replace: builder.attribute('tabindex'), - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/button-group/package.json b/packages/button-group/package.json index afaacdb36cb..e559ba50fa6 100644 --- a/packages/button-group/package.json +++ b/packages/button-group/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/button": "1.6.0" }, - "devDependencies": { - "@spectrum-css/buttongroup": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/button-group/src/spectrum-config.js b/packages/button-group/src/spectrum-config.js deleted file mode 100644 index c9b0f65b1e0..00000000000 --- a/packages/button-group/src/spectrum-config.js +++ /dev/null @@ -1,46 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ButtonGroup'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/buttongroup', - outPackage: 'button-group', - fileName: 'button-group', - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-ButtonGroup--vertical'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ButtonGroup--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ButtonGroup--sizeS', 's'], - ['spectrum-ButtonGroup--sizeL', 'l'], - ['spectrum-ButtonGroup--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToSlotted('spectrum-ButtonGroup-item'), - ], - }, - ], -}; - -export default config; diff --git a/packages/button/package.json b/packages/button/package.json index 95dca29f10c..057fdbdd287 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -98,9 +98,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/button": "14.1.6" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/button/src/button-base.css b/packages/button/src/button-base.css index 9ce92bbdb54..832ae36e284 100644 --- a/packages/button/src/button-base.css +++ b/packages/button/src/button-base.css @@ -21,7 +21,7 @@ governing permissions and limitations under the License. } :host([dir]) { - /* spectrum-css uses "-webkit-appearance: button" to workaround an + /* spectrum-button.css uses "-webkit-appearance: button" to workaround an * iOS and Safari issue. However, it results in incorrect styling * when applied in :host */ diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js deleted file mode 100644 index 51482b40260..00000000000 --- a/packages/button/src/spectrum-config.js +++ /dev/null @@ -1,234 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Button'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/button', - outPackage: 'button', - fileName: 'button', - systemOverrides: true, - excludeByComponents: [ - builder.element('a'), - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - excludeByWholeSelector: [ - // Exclude content hiding selectors when `pending` - //.spectrum-Button[pending] .spectrum-Icon - [ - builder.class('spectrum-Button'), - builder.attribute('pending'), - builder.combinator(' '), - builder.class('spectrum-Icon'), - ], - //.spectrum-Button[pending] .spectrum-Button-label - [ - builder.class('spectrum-Button'), - builder.attribute('pending'), - builder.combinator(' '), - builder.class('spectrum-Button-label'), - ], - //.spectrum-Button.is-pending .spectrum-Icon - [ - builder.class('spectrum-Button'), - builder.class('is-pending'), - builder.combinator(' '), - builder.class('spectrum-Icon'), - ], - //.spectrum-Button.is-pending .spectrum-Button-label - [ - builder.class('spectrum-Button'), - builder.class('is-pending'), - builder.combinator(' '), - builder.class('spectrum-Button-label'), - ], - ], - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-Button--quiet'), - converter.classToAttribute('spectrum-Button--emphasized'), - converter.classToAttribute( - 'spectrum-Button--noWrap', - 'no-wrap' - ), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-pending', 'pending'), - converter.pseudoToAttribute('disabled', 'disabled'), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute( - 'spectrum-Button--iconOnly', - 'icon-only' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Button--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Button--sizeS', 's'], - ['spectrum-Button--sizeL', 'l'], - ['spectrum-Button--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Button--accent'], - ['spectrum-Button--primary'], - ['spectrum-Button--secondary'], - ['spectrum-Button--negative'], - ], - 'variant' - ), - ...converter.enumerateAttributes( - [['spectrum-Button--fill'], ['spectrum-Button--outline']], - 'treatment' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Button--staticWhite', 'white'], - ['spectrum-Button--staticBlack', 'black'], - ], - 'static-color' - ), - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'class', - name: 'spectrum-Button--secondary', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - name: 'variant', - type: 'attribute', - operation: { - operator: 'equal', - value: 'secondary', - }, - }, - ], - ], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'class', - name: 'spectrum-Button--outline', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - name: 'treatment', - type: 'attribute', - operation: { - operator: 'equal', - value: 'outline', - }, - }, - ], - ], - }, - hoist: true, - }, - converter.classToId('spectrum-Button-label'), - converter.classToSlotted('spectrum-Icon', 'icon'), - { - find: [ - builder.class('spectrum-Icon'), - builder.combinator('+'), - builder.class('spectrum-Button-label'), - ], - replace: [ - { - replace: builder.attribute('name', 'icon', 'equal'), - hoist: false, - }, - { - replace: builder.combinator('+'), - }, - { - replace: builder.id('label'), - }, - ], - }, - { - hoist: false, - find: builder.pseudoClass('empty'), - replace: builder.attribute('hidden'), - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/card/package.json b/packages/card/package.json index 79d1e1ad3a7..dae0dad6c96 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -73,9 +73,6 @@ "@spectrum-web-components/shared": "1.6.0", "@spectrum-web-components/styles": "1.6.0" }, - "devDependencies": { - "@spectrum-css/card": "11.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/card/src/spectrum-config.js b/packages/card/src/spectrum-config.js deleted file mode 100644 index 47f56f0ff8f..00000000000 --- a/packages/card/src/spectrum-config.js +++ /dev/null @@ -1,74 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Card'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/card', - outPackage: 'card', - fileName: 'card', - components: [ - converter.classToHost(), - converter.classToClass('spectrum-Card-body'), - converter.classToClass('spectrum-Card-header'), - converter.classToClass('spectrum-Card-title'), - converter.classToClass('spectrum-Card-subtitle'), - converter.classToClass('spectrum-Card-content'), - converter.classToClass( - 'spectrum-Card-quickActions', - 'checkbox-toggle' - ), - converter.classToClass('spectrum-Card-actions'), - converter.classToClass( - 'spectrum-Card-actionButton', - 'action-button' - ), - converter.classToClass('spectrum-Checkbox', 'checkbox'), - ...converter.enumerateAttributes( - [['spectrum-Card--quiet'], ['spectrum-Card--gallery']], - 'variant' - ), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-drop-target', 'drop-target'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Card--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Card--sizeS', 's'], - ['spectrum-Card--sizeL', 'l'], - ['spectrum-Card--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToAttribute('spectrum-Card--horizontal'), - converter.classToId('spectrum-Card-coverPhoto', 'cover-photo'), - converter.classToId('spectrum-Card-preview'), - converter.classToSlotted('spectrum-Card-footer', 'footer'), - converter.classToSlotted( - 'spectrum-Card-description', - 'description' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index a99a72898bd..44967248320 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -77,9 +77,6 @@ "@spectrum-web-components/icons-ui": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/checkbox": "10.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/checkbox/src/spectrum-config.js b/packages/checkbox/src/spectrum-config.js deleted file mode 100644 index 5dfeb335dd2..00000000000 --- a/packages/checkbox/src/spectrum-config.js +++ /dev/null @@ -1,111 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Checkbox'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/checkbox', - outPackage: 'checkbox', - fileName: 'checkbox', - components: [ - converter.classToHost(), - converter.classToAttribute('is-indeterminate', 'indeterminate'), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('is-readOnly', 'readonly'), - converter.classToAttribute('spectrum-Checkbox--emphasized'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Checkbox--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Checkbox--sizeS', 's'], - ['spectrum-Checkbox--sizeL', 'l'], - ['spectrum-Checkbox--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToId('spectrum-Checkbox-input'), - converter.classToId('spectrum-Checkbox-box'), - converter.classToId('spectrum-Checkbox-checkmark'), - converter.classToId('spectrum-Checkbox-partialCheckmark'), - converter.classToId('spectrum-Checkbox-label'), - { - find: [ - { - type: 'class', - name: 'focus-ring', - }, - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'focus-visible', - }, - hoist: false, - }, - ], - }, - { - find: [ - { - type: 'class', - name: 'is-invalid', - }, - ], - replace: [ - { - replace: { - type: 'attribute', - name: 'invalid', - }, - emphasize: true, - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json index b56ab802a8d..bdf94b56d45 100644 --- a/packages/clear-button/package.json +++ b/packages/clear-button/package.json @@ -51,9 +51,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/clearbutton": "7.0.0-s2-foundations.16" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/clear-button/src/spectrum-config.js b/packages/clear-button/src/spectrum-config.js deleted file mode 100644 index 26cbd0dc3ec..00000000000 --- a/packages/clear-button/src/spectrum-config.js +++ /dev/null @@ -1,90 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ClearButton'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/clearbutton', - outPackage: 'clear-button', - fileName: 'clear-button', - components: [ - converter.classToHost(), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.pseudoToAttribute('disabled', 'disabled'), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-ClearButton--cta'], - ['spectrum-ClearButton--primary'], - ['spectrum-ClearButton--secondary'], - ['spectrum-ClearButton--overBackground'], - ['spectrum-ClearButton--warning', 'negative'], - ], - 'variant' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ClearButton--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ClearButton--sizeS', 's'], - ['spectrum-ClearButton--sizeL', 'l'], - ['spectrum-ClearButton--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass('spectrum-Icon', 'icon'), - converter.classToClass('spectrum-ClearButton-fill'), - ], - excludeByComponents: [ - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/close-button/package.json b/packages/close-button/package.json index 35e8dde7d53..8c26cec1122 100644 --- a/packages/close-button/package.json +++ b/packages/close-button/package.json @@ -51,9 +51,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/closebutton": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/close-button/src/spectrum-config.js b/packages/close-button/src/spectrum-config.js deleted file mode 100644 index 6943961c745..00000000000 --- a/packages/close-button/src/spectrum-config.js +++ /dev/null @@ -1,126 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-CloseButton'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/closebutton', - outPackage: 'close-button', - fileName: 'close-button', - components: [ - converter.classToHost(), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.pseudoToAttribute('disabled', 'disabled'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-keyboardFocused', 'focused'), - ...converter.enumerateAttributes( - [ - ['spectrum-CloseButton--staticWhite', 'white'], - ['spectrum-CloseButton--staticBlack', 'black'], - ], - 'static-color' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-CloseButton--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-CloseButton--sizeS', 's'], - ['spectrum-CloseButton--sizeL', 'l'], - ['spectrum-CloseButton--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass('spectrum-CloseButton-UIIcon', 'icon'), - { - hoist: true, - find: { - type: 'pseudo-class', - kind: 'focus-visible', - }, - replace: { - type: 'pseudo-class', - kind: 'focus-visible', - }, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'disabled', - }, - ], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - name: 'disabled', - type: 'attribute', - }, - ], - ], - }, - hoist: true, - }, - ], - excludeByComponents: [ - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/coachmark/package.json b/packages/coachmark/package.json index 901831c4513..3f458e43734 100644 --- a/packages/coachmark/package.json +++ b/packages/coachmark/package.json @@ -87,10 +87,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/coachindicator": "3.0.0-s2-foundations.16", - "@spectrum-css/coachmark": "8.0.0-s2-foundations.17" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/coachmark/src/spectrum-config.js b/packages/coachmark/src/spectrum-config.js deleted file mode 100644 index 684edbfe357..00000000000 --- a/packages/coachmark/src/spectrum-config.js +++ /dev/null @@ -1,69 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-CoachMark'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/coachindicator', - outPackage: 'coachmark', - fileName: 'coach-indicator', - components: [ - converter.classToHost('spectrum-CoachIndicator'), - converter.classToClass('spectrum-CoachIndicator-ring', 'ring'), - converter.classToAttribute( - 'spectrum-CoachIndicator--quiet', - 'quiet' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-CoachIndicator--dark', 'black'], - ['spectrum-CoachIndicator--light', 'white'], - ], - 'static-color' - ), - ], - }, - { - inPackage: '@spectrum-css/coachmark', - outPackage: 'coachmark', - fileName: 'coachmark', - components: [ - converter.classToHost(), - converter.classToClass('spectrum-CoachMark-ring'), - converter.classToClass('spectrum-CoachMark-buttongroup'), - converter.classToClass( - 'spectrum-CoachMark-buttongroup--mobile', - 'buttongroup-mobile' - ), - converter.classToClass('spectrum-CoachMark-menu'), - converter.classToClass('spectrum-CoachMark-image-wrapper'), - converter.classToClass('spectrum-CoachMark-image'), - converter.classToClass('spectrum-CoachMark-header'), - converter.classToClass('spectrum-CoachMark-content'), - converter.classToClass('spectrum-CoachMark-footer'), - converter.classToClass('spectrum-CoachMark-action-menu'), - converter.classToClass('spectrum-CoachMark-title'), - converter.classToClass('spectrum-CoachMark-step'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-area/package.json b/packages/color-area/package.json index a25f50c77de..610c9777440 100644 --- a/packages/color-area/package.json +++ b/packages/color-area/package.json @@ -74,9 +74,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorarea": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-area/src/spectrum-config.js b/packages/color-area/src/spectrum-config.js deleted file mode 100644 index 1846d877aa6..00000000000 --- a/packages/color-area/src/spectrum-config.js +++ /dev/null @@ -1,45 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorArea'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorarea', - outPackage: 'color-area', - fileName: 'color-area', - excludeByComponents: [ - { - type: 'class', - name: 'spectrum-ColorHandle-color', - }, - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToClass('spectrum-ColorArea-slider'), - converter.classToClass('spectrum-ColorArea-handle'), - converter.classToClass('spectrum-ColorArea-gradient'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index aa8d78fd22c..4c9789d7a58 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -68,9 +68,6 @@ "@spectrum-web-components/color-loupe": "1.6.0", "@spectrum-web-components/opacity-checkerboard": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorhandle": "10.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-handle/src/spectrum-config.js b/packages/color-handle/src/spectrum-config.js deleted file mode 100644 index e64dbf6ed28..00000000000 --- a/packages/color-handle/src/spectrum-config.js +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorHandle'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorhandle', - outPackage: 'color-handle', - fileName: 'color-handle', - components: [ - converter.classToHost(), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToClass('spectrum-ColorHandle-inner'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index 46c1e9ea290..58d325e98ff 100644 --- a/packages/color-loupe/package.json +++ b/packages/color-loupe/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/opacity-checkerboard": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorloupe": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-loupe/src/spectrum-config.js b/packages/color-loupe/src/spectrum-config.js deleted file mode 100644 index a420afa4501..00000000000 --- a/packages/color-loupe/src/spectrum-config.js +++ /dev/null @@ -1,43 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorLoupe'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorloupe', - outPackage: 'color-loupe', - fileName: 'color-loupe', - excludeByComponents: [ - { - type: 'class', - name: '🤫', - }, - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToClass('spectrum-ColorLoupe-outer'), - converter.classToClass('spectrum-ColorLoupe-inner'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json index a8adbeac2c5..24fe987642e 100644 --- a/packages/color-slider/package.json +++ b/packages/color-slider/package.json @@ -74,9 +74,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorslider": "8.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-slider/src/spectrum-config.js b/packages/color-slider/src/spectrum-config.js deleted file mode 100644 index 7ecbdb57996..00000000000 --- a/packages/color-slider/src/spectrum-config.js +++ /dev/null @@ -1,41 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorSlider'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorslider', - outPackage: 'color-slider', - fileName: 'color-slider', - components: [ - converter.classToHost(), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('spectrum-ColorSlider--vertical'), - converter.classToClass('spectrum-ColorSlider-checkerboard'), - converter.classToClass('spectrum-ColorSlider-gradient'), - converter.classToClass('spectrum-ColorSlider-slider'), - converter.classToClass('spectrum-ColorSlider-handle'), - ], - }, - ], -}; - -export default config; diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json index 75a3db8b5ee..8a32a637099 100644 --- a/packages/color-wheel/package.json +++ b/packages/color-wheel/package.json @@ -73,9 +73,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/colorwheel": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/color-wheel/src/spectrum-config.js b/packages/color-wheel/src/spectrum-config.js deleted file mode 100644 index 234c01f54e1..00000000000 --- a/packages/color-wheel/src/spectrum-config.js +++ /dev/null @@ -1,59 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ColorWheel'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/colorwheel', - outPackage: 'color-wheel', - fileName: 'color-wheel', - excludeByComponents: [ - builder.class('🤫'), - builder.class('spectrum-ColorWheel-ColorArea-handle'), - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-dragged', 'dragged'), - converter.classToClass('spectrum-ColorWheel-handle'), - converter.classToClass('spectrum-ColorWheel-slider'), - converter.classToClass('spectrum-ColorWheel-wheel'), - converter.classToClass('spectrum-ColorWheel-innerCircle'), - converter.classToClass('spectrum-ColorWheel-outerCircle'), - converter.classToClass('spectrum-ColorWheel-segment'), - converter.classToClass('spectrum-ColorWheel-border'), - converter.classToClass( - 'spectrum-ColorWheel-colorarea-container' - ), - converter.classToClass('spectrum-ColorWheel-inner'), - converter.classToSlotted( - 'spectrum-ColorWheel-gradient', - 'gradient' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 2904f53d5c5..2be707f92d0 100644 --- a/packages/combobox/package.json +++ b/packages/combobox/package.json @@ -75,9 +75,6 @@ "@spectrum-web-components/progress-circle": "1.6.0", "@spectrum-web-components/textfield": "1.6.0" }, - "devDependencies": { - "@spectrum-css/combobox": "4.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/combobox/src/spectrum-config.js b/packages/combobox/src/spectrum-config.js deleted file mode 100644 index 976996abd04..00000000000 --- a/packages/combobox/src/spectrum-config.js +++ /dev/null @@ -1,156 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Combobox'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/combobox', - outPackage: 'combobox', - fileName: 'combobox', - components: [ - converter.classToHost(), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Combobox--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Combobox--sizeS', 's'], - ['spectrum-Combobox--sizeL', 'l'], - ['spectrum-Combobox--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToAttribute('spectrum-Combobox--quiet'), - converter.classToClass('spectrum-Combobox-progress-circle'), - converter.classToClass('spectrum-Combobox-button'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-loading', 'pending'), - converter.classToAttribute( - 'is-keyboardFocused', - 'keyboard-focused' - ), - converter.classToAttribute('is-disabled', 'disabled'), - { - find: [ - builder.class('spectrum-Combobox-button'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.pseudoClass('disabled')], - [builder.class('is-invalid')], - [builder.class('spectrum-PickerButton--quiet')], - ], - }, - ], - replace: [ - { - replace: builder.class('button'), - }, - { - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [builder.pseudoClass('disabled')], - [builder.class('is-invalid')], - [builder.attribute('quiet')], - ], - }, - }, - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-focused')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('focused')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-invalid')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('invalid')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-keyboardFocused')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('keyboard-focused')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-disabled')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('disabled')]], - }, - hoist: true, - }, - converter.classToId('spectrum-Combobox-input'), - converter.classToId('spectrum-Combobox-textfield'), - converter.classToId('spectrum-Textfield', 'textfield'), - converter.classToClass( - 'spectrum-Textfield-validationIcon', - 'icon' - ), - ], - excludeByComponents: [ - { - type: 'class', - name: 'regex', - regex: /Datepicker/, - }, - builder.class('🤫'), - // builder.class('spectrum-PickerButton-fill'), - ], - }, - ], -}; - -export default config; diff --git a/packages/contextual-help/package.json b/packages/contextual-help/package.json index 27a523dee02..973e851f6eb 100644 --- a/packages/contextual-help/package.json +++ b/packages/contextual-help/package.json @@ -71,9 +71,6 @@ "@spectrum-web-components/overlay": "1.6.0", "@spectrum-web-components/popover": "1.6.0" }, - "devDependencies": { - "@spectrum-css/contextualhelp": "5.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/contextual-help/src/spectrum-config.js b/packages/contextual-help/src/spectrum-config.js deleted file mode 100644 index f88fa7e1129..00000000000 --- a/packages/contextual-help/src/spectrum-config.js +++ /dev/null @@ -1,54 +0,0 @@ -/* -Copyright 2024 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -// @ts-check - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ContextualHelp'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/contextualhelp', - outPackage: 'contextual-help', - fileName: 'contextual-help', - hoistCustomPropertiesFrom: 'spectrum-ContextualHelp', - excludeByComponents: [ - // No need to style the trigger, it is already styled by sp-button - builder.class('spectrum-ContextualHelp-button'), - builder.class('spectrum--large'), - ], - components: [ - // The min-width should be applied to the popover, not the :host - converter.classToClass('spectrum-ContextualHelp', 'popover'), - converter.classToClass('spectrum-ContextualHelp-popover'), - converter.classToSlotted( - 'spectrum-ContextualHelp-heading', - 'heading' - ), - converter.classToClass('spectrum-ContextualHelp-body'), - converter.classToSlotted( - 'spectrum-ContextualHelp-link', - 'link' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/dialog/package.json b/packages/dialog/package.json index f8ab5aff05c..b04d1d60dc7 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -90,9 +90,6 @@ "@spectrum-web-components/shared": "1.6.0", "@spectrum-web-components/underlay": "1.6.0" }, - "devDependencies": { - "@spectrum-css/dialog": "11.0.0-s2-foundations.15" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/dialog/src/spectrum-config.js b/packages/dialog/src/spectrum-config.js deleted file mode 100644 index 9574df5abbb..00000000000 --- a/packages/dialog/src/spectrum-config.js +++ /dev/null @@ -1,111 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Dialog'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/dialog', - outPackage: 'dialog', - fileName: 'dialog', - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-Dialog--error'), - converter.classToAttribute('spectrum-Dialog--dismissable'), - converter.classToAttribute( - 'spectrum-Dialog--noDivider', - 'no-divider' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Dialog--small', 's'], - ['spectrum-Dialog--medium', 'm'], - ['spectrum-Dialog--large', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Dialog--fullscreen'], - ['spectrum-Dialog--fullscreenTakeover'], - ], - 'mode' - ), - converter.classToSlotted('spectrum-Dialog-heading', 'heading'), - converter.classToSlotted('spectrum-Dialog-hero', 'hero'), - converter.classToSlotted('*'), - converter.classToClass('spectrum-Dialog-grid'), - converter.classToClass('spectrum-Dialog-divider'), - converter.classToClass('spectrum-Dialog-content'), - converter.classToClass( - 'spectrum-Dialog-closeButton', - 'close-button' - ), - converter.classToClass('spectrum-Dialog-header'), - converter.classToClass('spectrum-Dialog-footer'), - converter.classToClass('spectrum-Dialog-typeIcon', 'type-icon'), - converter.classToClass('spectrum-Button'), - converter.classToClass( - 'spectrum-Dialog-buttonGroup', - 'button-group' - ), - converter.classToClass( - 'spectrum-Dialog-buttonGroup--noFooter', - 'button-group--noFooter' - ), - { - find: [ - builder.class('spectrum-Dialog-heading'), - builder.class('spectrum-Dialog-heading--noHeader'), - ], - replace: [ - { - replace: builder.class('no-header'), - }, - { - replace: builder.slotted('heading'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Dialog-heading'), - { - type: 'combinator', - value: 'next-sibling', - }, - builder.class('spectrum-Dialog-divider'), - ], - replace: [ - { - replace: builder.attribute('name', 'heading'), - hoist: false, - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/divider/package.json b/packages/divider/package.json index b895e368bcd..740af54f1ad 100644 --- a/packages/divider/package.json +++ b/packages/divider/package.json @@ -66,9 +66,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/divider": "5.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/divider/src/spectrum-config.js b/packages/divider/src/spectrum-config.js deleted file mode 100644 index 42116661e10..00000000000 --- a/packages/divider/src/spectrum-config.js +++ /dev/null @@ -1,51 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Divider'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/divider', - outPackage: 'divider', - fileName: 'divider', - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-Divider--vertical'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Divider--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Divider--sizeS', 's'], - ['spectrum-Divider--sizeL', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Divider--staticWhite', 'white'], - ['spectrum-Divider--staticBlack', 'black'], - ], - 'static-color' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index 864681ea844..030ca6cf758 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -66,9 +66,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/dropzone": "8.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/dropzone/src/spectrum-config.js b/packages/dropzone/src/spectrum-config.js deleted file mode 100644 index 59406246c78..00000000000 --- a/packages/dropzone/src/spectrum-config.js +++ /dev/null @@ -1,39 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-DropZone'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/dropzone', - outPackage: 'dropzone', - fileName: 'dropzone', - components: [ - converter.classToHost(), - converter.classToAttribute('is-dragged', 'dragged'), - converter.classToAttribute('is-filled', 'filled'), - converter.classToSlotted( - 'spectrum-IllustratedMessage-illustration' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/field-group/package.json b/packages/field-group/package.json index 12a40150316..5a185995f49 100644 --- a/packages/field-group/package.json +++ b/packages/field-group/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/help-text": "1.6.0" }, - "devDependencies": { - "@spectrum-css/fieldgroup": "6.0.0-s2-foundations.16" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/field-group/src/spectrum-config.js b/packages/field-group/src/spectrum-config.js deleted file mode 100644 index 460de36999b..00000000000 --- a/packages/field-group/src/spectrum-config.js +++ /dev/null @@ -1,84 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-FieldGroup'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/fieldgroup', - outPackage: 'field-group', - fileName: 'field-group', - hoistCustomPropertiesFrom: 'spectrum-FieldGroup', - excludeByComponents: [builder.class('spectrum-Checkbox')], - components: [ - converter.classToClass('spectrum-FieldGroup', 'group'), - converter.classToAttribute('spectrum-FieldGroup--horizontal'), - converter.classToAttribute('spectrum-FieldGroup--vertical'), - converter.classToClass( - 'spectrum-FieldGroupInputLayout', - 'group' - ), - { - find: [ - // .spectrum-FieldGroup-item:not(:last-child) - builder.class('spectrum-FieldGroup-item'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.pseudoClass('last-child')]], - }, - ], - replace: [ - //slot:not([name])::slotted(:not(:last-child)) - { - replace: builder.element('slot'), - }, - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('name')]], - }, - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.pseudoClass('last-child')], - ], - }, - ], - }, - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/field-label/package.json b/packages/field-label/package.json index bce413a7708..a330b0e94f5 100644 --- a/packages/field-label/package.json +++ b/packages/field-label/package.json @@ -70,9 +70,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/fieldlabel": "10.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/field-label/src/spectrum-config.js b/packages/field-label/src/spectrum-config.js deleted file mode 100644 index b23388039de..00000000000 --- a/packages/field-label/src/spectrum-config.js +++ /dev/null @@ -1,73 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-FieldLabel'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/fieldlabel', - outPackage: 'field-label', - fileName: 'field-label', - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-FieldLabel--left', 'start'], - ['spectrum-FieldLabel--right', 'end'], - ], - 'side-aligned' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-FieldLabel--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-FieldLabel--sizeS', 's'], - ['spectrum-FieldLabel--sizeL', 'l'], - ['spectrum-FieldLabel--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass( - 'spectrum-FieldLabel-requiredIcon', - 'required-icon' - ), - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - ], - excludeByComponents: [ - builder.class('spectrum-Form'), - builder.class('spectrum-Form-item'), - builder.class('spectrum-Form-itemLabel'), - builder.class('spectrum-Form--labelsAbove'), - builder.class('spectrum-Form-itemField'), - ], - }, - ], -}; - -export default config; diff --git a/packages/help-text/package.json b/packages/help-text/package.json index 0ec717bc437..44a0efc0d26 100644 --- a/packages/help-text/package.json +++ b/packages/help-text/package.json @@ -88,9 +88,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/helptext": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/help-text/src/spectrum-config.js b/packages/help-text/src/spectrum-config.js deleted file mode 100644 index 99cf58e52e0..00000000000 --- a/packages/help-text/src/spectrum-config.js +++ /dev/null @@ -1,64 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-HelpText'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/helptext', - outPackage: 'help-text', - fileName: 'help-text', - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-HelpText--neutral'], - ['spectrum-HelpText--negative'], - ], - 'variant' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-HelpText--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-HelpText--sizeS', 's'], - ['spectrum-HelpText--sizeL', 'l'], - ['spectrum-HelpText--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass('spectrum-HelpText-text'), - converter.classToClass( - 'spectrum-HelpText-validationIcon', - 'icon' - ), - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/icon/package.json b/packages/icon/package.json index f19cc6ac74e..fc026ca160d 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -90,9 +90,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/iconset": "1.6.0" }, - "devDependencies": { - "@spectrum-css/icon": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/icon/src/spectrum-config.js b/packages/icon/src/spectrum-config.js deleted file mode 100644 index 8e19630fa52..00000000000 --- a/packages/icon/src/spectrum-config.js +++ /dev/null @@ -1,115 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Icon'); - -/** - * - * @param {string} fileName - * @param {RegExp} regex - * @returns {import('../../../tasks/spectrum-css-converter').Conversion} - */ -const iconType = (fileName, regex) => ({ - inPackage: '@spectrum-css/icon', - outPackage: 'icon', - fileName, - requireComponentPresence: [ - /** @type {import('../../../tasks/spectrum-css-converter').SelectorComponentWithRegex} */ ({ - type: 'class', - regex, - }), - ], - components: [], -}); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/icon', - outPackage: 'icon', - fileName: 'icon', - requireComponentPresence: [ - /** @type {import('../../../tasks/spectrum-css-converter').SelectorComponentWithRegex} */ ({ - type: 'class', - regex: /spectrum-Icon/, - }), - ], - components: [ - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'root', - }, - ], - ], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'root', - }, - ], - ], - }, - hoist: true, - }, - converter.classToHost(), - ...converter.enumerateAttributes( - [ - ['spectrum-Icon--sizeXXS', 'xxs'], - ['spectrum-Icon--sizeXS', 'xs'], - ['spectrum-Icon--sizeS', 's'], - ['spectrum-Icon--sizeM', 'm'], - ['spectrum-Icon--sizeL', 'l'], - ['spectrum-Icon--sizeXL', 'xl'], - ['spectrum-Icon--sizeXXL', 'xxl'], - ], - 'size' - ), - ], - excludeByComponents: [ - builder.element('svg'), - builder.element('img'), - ], - }, - iconType('icon-arrow', /^spectrum-UIIcon-Arrow/), - iconType('icon-asterisk', /^spectrum-UIIcon-Asterisk/), - iconType('icon-checkmark', /^spectrum-UIIcon-Checkmark/), - iconType('icon-chevron', /^spectrum-UIIcon-Chevron/), - iconType('icon-corner-triangle', /^spectrum-UIIcon-CornerTriangle/), - iconType('icon-cross', /^spectrum-UIIcon-Cross/), - iconType('icon-dash', /^spectrum-UIIcon-Dash/), - iconType('icon-double-gripper', /^spectrum-UIIcon-DoubleGripper/), - iconType('icon-single-gripper', /^spectrum-UIIcon-SingleGripper/), - iconType('icon-triple-gripper', /^spectrum-UIIcon-TripleGripper/), - ], -}; - -export default config; diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json index 9819c60d1b2..8437d2882f0 100644 --- a/packages/icons-ui/package.json +++ b/packages/icons-ui/package.json @@ -59,7 +59,7 @@ "@spectrum-css/ui-icons-s2": "npm:@spectrum-css/ui-icons@2.0.0-s2-foundations.10", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.3", "fs": "^0.0.1-security", "path": "^0.12.7", "prettier": "^3.5.3" diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json index e22cad65613..9e332df10d8 100644 --- a/packages/icons-workflow/package.json +++ b/packages/icons-workflow/package.json @@ -57,10 +57,9 @@ "devDependencies": { "@adobe/spectrum-css-workflow-icons": "1.7.0", "@adobe/spectrum-css-workflow-icons-s2": "npm:@adobe/spectrum-css-workflow-icons@4.1.0", - "@spectrum-css/icon": "9.1.0", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", - "fast-glob": "^3.2.12", + "fast-glob": "^3.3.3", "fs": "^0.0.1-security", "path": "^0.12.7", "prettier": "^3.5.3" diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json index 716f5ca90bd..e1acb14f513 100644 --- a/packages/illustrated-message/package.json +++ b/packages/illustrated-message/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/styles": "1.6.0" }, - "devDependencies": { - "@spectrum-css/illustratedmessage": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/illustrated-message/src/spectrum-config.js b/packages/illustrated-message/src/spectrum-config.js deleted file mode 100644 index 7c9b2da38e9..00000000000 --- a/packages/illustrated-message/src/spectrum-config.js +++ /dev/null @@ -1,37 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-IllustratedMessage'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/illustratedmessage', - outPackage: 'illustrated-message', - fileName: 'illustratedmessage', - components: [ - converter.classToHost(), - converter.classToId('spectrum-IllustratedMessage-heading'), - converter.classToId('spectrum-IllustratedMessage-description'), - converter.classToId('spectrum-IllustratedMessage-illustration'), - ], - }, - ], -}; - -export default config; diff --git a/packages/infield-button/package.json b/packages/infield-button/package.json index a8754600f8f..90108019c7b 100644 --- a/packages/infield-button/package.json +++ b/packages/infield-button/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/button": "1.6.0" }, - "devDependencies": { - "@spectrum-css/infieldbutton": "6.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/infield-button/src/spectrum-config.js b/packages/infield-button/src/spectrum-config.js deleted file mode 100644 index e241bfc0bb3..00000000000 --- a/packages/infield-button/src/spectrum-config.js +++ /dev/null @@ -1,85 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ -// @ts-check - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-InfieldButton'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/infieldbutton', - outPackage: 'infield-button', - fileName: 'infield-button', - components: [ - converter.classToHost(), - ...converter.enumerateAttributes( - [ - ['spectrum-InfieldButton--sizeS', 's'], - ['spectrum-InfieldButton--sizeL', 'l'], - ['spectrum-InfieldButton--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-InfieldButton--right', 'end'], - ['spectrum-InfieldButton--left', 'start'], - ], - 'inline' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-InfieldButton--top', 'start'], - ['spectrum-InfieldButton--bottom', 'end'], - ], - 'block' - ), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('spectrum-InfieldButton--quiet'), - converter.pseudoToAttribute('disabled', 'disabled'), - converter.classToClass('spectrum-InfieldButton-fill', 'fill'), - converter.classToSlotted('spectrum-InfieldButton-icon'), - ], - }, - ], -}; - -export default config; diff --git a/packages/link/package.json b/packages/link/package.json index 0d846a633ae..a02038d0b53 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/link": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/link/src/spectrum-config.js b/packages/link/src/spectrum-config.js deleted file mode 100644 index f2bf7c573c4..00000000000 --- a/packages/link/src/spectrum-config.js +++ /dev/null @@ -1,189 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Link'); - -/** - * @returns {import('../../../tasks/spectrum-css-converter').ComplexSelectorConversion} - */ -const includeAnchor = (className, attribute, value) => ({ - find: [ - /** @type {import('lightningcss').SelectorComponent} */ ( - builder.class(className) - ), - ], - replace: [ - { - replace: /** @type {import('lightningcss').SelectorComponent} */ ({ - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute(attribute, value)], - }), - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.element('a'), - }, - ], -}); - -/** - * - * @param {string} pseudo - * @param {string} className - * @param {string} attribute - * @param {string} value - * @returns {import('../../../tasks/spectrum-css-converter').ComplexSelectorConversion} - */ -const includeAnchorWithPseudoClass = (pseudo, className, attribute, value) => { - const component = includeAnchor(className, attribute, value); - const pseudoComponent = - /** @type {import('lightningcss').SelectorComponent} */ ( - builder.pseudoClass(pseudo) - ); - component.find.push(pseudoComponent); - component.replace.push({ - replace: pseudoComponent, - }); - return component; -}; - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/link', - outPackage: 'link', - fileName: 'link', - hoistCustomPropertiesFrom: 'spectrum-Link', - components: [ - { - find: [ - builder.class('spectrum-Link'), - builder.pseudoClass('active'), - ], - replace: [], - }, - { - find: [ - builder.class('spectrum-Link'), - builder.pseudoClass('hover'), - ], - replace: [ - { - replace: builder.element('a'), - }, - { - replace: builder.pseudoClass('hover'), - }, - ], - }, - includeAnchor('spectrum-Link--quiet', 'quiet'), - includeAnchorWithPseudoClass( - 'hover', - 'spectrum-Link--quiet', - 'quiet' - ), - includeAnchor( - 'spectrum-Link--secondary', - 'variant', - 'secondary' - ), - includeAnchorWithPseudoClass( - 'hover', - 'spectrum-Link--secondary', - 'variant', - 'secondary' - ), - includeAnchorWithPseudoClass( - 'active', - 'spectrum-Link--secondary', - 'variant', - 'secondary' - ), - includeAnchorWithPseudoClass( - 'focus', - 'spectrum-Link--secondary', - 'variant', - 'secondary' - ), - includeAnchor( - 'spectrum-Link--staticWhite', - 'static-color', - 'white' - ), - includeAnchorWithPseudoClass( - 'hover', - 'spectrum-Link--staticWhite', - 'static-color', - 'white' - ), - includeAnchorWithPseudoClass( - 'active', - 'spectrum-Link--staticWhite', - 'static-color', - 'white' - ), - includeAnchorWithPseudoClass( - 'focus', - 'spectrum-Link--staticWhite', - 'static-color', - 'white' - ), - includeAnchor( - 'spectrum-Link--staticBlack', - 'static-color', - 'black' - ), - includeAnchorWithPseudoClass( - 'hover', - 'spectrum-Link--staticBlack', - 'static-color', - 'black' - ), - includeAnchorWithPseudoClass( - 'active', - 'spectrum-Link--staticBlack', - 'static-color', - 'black' - ), - includeAnchorWithPseudoClass( - 'focus', - 'spectrum-Link--staticBlack', - 'static-color', - 'black' - ), - { - find: builder.class('spectrum-Link'), - replace: builder.element('a'), - }, - converter.classToAttribute('spectrum-Link--quiet'), - converter.classToAttribute( - 'spectrum-Link--overBackground', - 'over-background' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/menu/package.json b/packages/menu/package.json index 41584bbb6dd..eac4fcf6112 100644 --- a/packages/menu/package.json +++ b/packages/menu/package.json @@ -106,9 +106,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/menu": "9.2.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/menu/src/spectrum-config.js b/packages/menu/src/spectrum-config.js deleted file mode 100644 index fa95a65473d..00000000000 --- a/packages/menu/src/spectrum-config.js +++ /dev/null @@ -1,652 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Menu'); -/** - * @type { import('../../../tasks/spectrum-css-converter.js').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - // Menu Section Heading - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'menu-sectionHeading', - excludeByComponents: [ - builder.class('spectrum-Menu-divider'), - builder.class('spectrum-Menu'), - builder.class('spectrum-menu-itemSelection'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-chevron/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-checkmark/, - }, - ], - components: [ - converter.classToClass( - 'spectrum-Menu-sectionHeading', - 'header' - ), - ], - }, - { - // Menu Item - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'menu-item', - excludeByComponents: [ - builder.class('spectrum-Menu'), - builder.class('spectrum-Menu-sectionHeading'), - builder.class('spectrum-Menu-divider'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - ], - excludeByWholeSelector: [ - [ - builder.class('spectrum-Menu-item'), - builder.combinator(' '), - builder.class('spectrum-Menu-item'), - ], - ], - includeByWholeSelector: [ - [ - /** .spectrum-Menu .spectrum-Menu-itemIcon */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-itemIcon'), - ], - [ - /** .spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-itemIcon--workflowIcon'), - ], - ], - components: [ - converter.classToHost('spectrum-Menu-item'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-active', 'active'), - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToId('spectrum-Menu-itemLabel', 'label'), - converter.classToClass('spectrum-Menu-chevron', 'chevron'), - converter.classToClass( - 'spectrum-Menu-chevron--withAdjacentIcon', - 'chevron--withAdjacentIcon' - ), - converter.classToClass('spectrum-Menu-checkmark', 'checkmark'), - converter.classToClass( - 'spectrum-Menu-checkmark--withAdjacentIcon', - 'checkmark--withAdjacentIcon' - ), - converter.classToAttribute( - 'spectrum-Menu-item--drillIn', - 'has-submenu' - ), - converter.classToSlotted('spectrum-Icon', 'icon'), - { - collapseSelector: true, - find: [ - /** .spectrum-Menu .spectrum-Menu-itemIcon */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-itemIcon'), - ], - replace: [ - { - replace: builder.slotted('icon'), - }, - ], - }, - { - collapseSelector: true, - find: [ - /** .spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-itemIcon--workflowIcon'), - ], - replace: [ - { - replace: builder.slotted('icon'), - }, - ], - }, - converter.classToSlotted('spectrum-Menu-itemIcon', 'icon'), - converter.classToSlotted( - 'spectrum-Menu-itemIcon--workflowIcon', - 'icon' - ), - converter.classToSlotted('spectrum-Menu-itemValue', 'value'), - { - find: [ - { - type: 'class', - name: 'spectrum-Menu-itemDescription', - }, - ], - replace: [ - { - replace: builder.attribute('name', 'description'), - hoist: false, - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'universal', - }, - ], - }, - }, - ], - }, - converter.classToClass( - 'spectrum-menu-itemSelection', - 'menu-itemSelection' - ), - { - find: { - type: 'pseudo-class', - kind: 'focus-visible', - }, - replace: builder.attribute('focused'), - }, - { - find: [builder.class('spectrum-Menu-itemLabel--wrapping')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'no-wrap', - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('label'), - }, - ], - }, - { - find: [builder.class('spectrum-Menu-itemLabel--truncate')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'no-wrap', - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('label'), - }, - ], - }, - { - collapseSelector: true, - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-disabled')]], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [[builder.attribute('disabled')]], - }, - hoist: true, - }, - { - find: [ - builder.class('spectrum-Menu-itemIcon'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.class('spectrum-Menu-chevron')], - [builder.class('spectrum-Menu-checkmark')], - ], - }, - ], - replace: [ - { - replace: builder.class('icon'), - }, - { - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [builder.class('chevron')], - [builder.class('checkmark')], - ], - }, - }, - ], - }, - ], - }, - { - // Menu Divider - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'menu-divider', - excludeByComponents: [ - builder.class('spectrum-menu-itemSelection'), - builder.class('spectrum-Menu-sectionHeading'), - builder.class('spectrum-Menu'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-checkmark/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-chevron/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - ], - excludeByWholeSelector: [ - [builder.class('spectrum-Menu')], - [ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu'), - ], - ], - includeByWholeSelector: [ - [ - builder.class('spectrum-Menu'), - builder.combinator('descendant'), - builder.class('spectrum-Menu-divider'), - ], - ], - components: [ - converter.classToHost('spectrum-Menu-divider'), - { - collapseSelector: true, - find: [ - builder.class('spectrum-Menu'), - builder.combinator('descendant'), - builder.class('spectrum-Menu-divider'), - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - }, - }, - ], - }, - ], - }, - { - // Menu Checkmark - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'checkmark', - excludeByComponents: [ - builder.class('spectrum-Menu-sectionHeading'), - builder.class('spectrum-Menu-divider'), - builder.class('spectrum-Menu'), - builder.class('spectrum-menu-itemSelection'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-chevron/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - ], - includeByWholeSelector: [ - [ - /** .spectrum-Menu .spectrum-Menu-checkmark */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-checkmark'), - ], - ], - components: [ - converter.classToClass('spectrum-Menu-checkmark', 'checkmark'), - converter.classToClass( - 'spectrum-Menu-checkmark--withAdjacentIcon', - 'checkmark--withAdjacentIcon' - ), - { - collapseSelector: true, - find: [ - /** .spectrum-Menu .spectrum-Menu-checkmark */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-checkmark'), - ], - replace: [ - { - replace: builder.class('checkmark'), - }, - ], - }, - ], - }, - { - // Menu Chevron - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'chevron', - excludeByComponents: [ - builder.class('spectrum-Menu-sectionHeading'), - builder.class('spectrum-Menu-divider'), - builder.class('spectrum-Menu'), - builder.class('spectrum-menu-itemSelection'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu--size/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-checkmark/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - ], - includeByWholeSelector: [ - [ - /** .spectrum-Menu .spectrum-Menu-chevron */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-chevron'), - ], - ], - components: [ - converter.classToClass('spectrum-Menu-chevron', 'chevron'), - converter.classToClass( - 'spectrum-Menu-chevron--withAdjacentIcon', - 'chevron--withAdjacentIcon' - ), - { - collapseSelector: true, - find: [ - /** .spectrum-Menu .spectrum-Menu-checkmark */ - builder.class('spectrum-Menu'), - builder.combinator(' '), - builder.class('spectrum-Menu-chevron'), - ], - replace: [ - { - replace: builder.class('chevron'), - }, - ], - }, - ], - }, - { - // Menu - inPackage: '@spectrum-css/menu', - outPackage: 'menu', - fileName: 'menu', - excludeByComponents: [ - builder.class('spectrum-Menu-divider'), - builder.class('spectrum-menu-itemSelection'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-item/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-checkmark/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Menu-chevron/, - }, - builder.element('li'), - ], - includeByWholeSelector: [ - /* [dir=ltr] .spectrum-Menu.is-selectable .spectrum-Menu-item */ - [ - builder.class('spectrum-Menu'), - builder.class('is-selectable'), - builder.combinator(' '), - builder.class('spectrum-Menu-item'), - ], - /* [dir=ltr] .spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected */ - [ - builder.class('spectrum-Menu'), - builder.class('is-selectable'), - builder.combinator(' '), - builder.class('spectrum-Menu-item'), - builder.class('is-selected'), - ], - // [builder.class('spectrum-Menu-item')], - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-selectable', 'selects'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Menu--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Menu--sizeS', 's'], - ['spectrum-Menu--sizeL', 'l'], - ['spectrum-Menu--sizeXL', 'xl'], - ], - 'size' - ), - { - find: [builder.class('spectrum-Menu-item')], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.element('sp-menu-item')], - }, - }, - ], - }, - { - collapseSelector: true, - find: [ - builder.class('spectrum-Menu-item'), - builder.class('is-selected'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-menu-item'), - builder.attribute('selected'), - ], - }, - }, - ], - }, - { - find: [ - builder.element('li'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.class('spectrum-Menu-item')], - [builder.class('spectrum-Menu-divider')], - ], - }, - ], - replace: [ - { - replace: builder.element('li'), - }, - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-menu-item'), - ], - }, - ], - [builder.class('menu-divider')], - ], - }, - }, - ], - }, - { - find: [ - builder.element('li'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.class('spectrum-Menu-item')], - [builder.class('spectrum-Menu-divider')], - ], - }, - builder.combinator('child'), - builder.class('spectrum-Menu-sectionHeading'), - ], - replace: [ - { - replace: builder.element('li'), - }, - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.element('sp-menu-item'), - ], - }, - ], - [builder.class('menu-divider')], - ], - }, - }, - { - replace: builder.combinator('child'), - }, - { - replace: builder.class('header'), - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/meter/package.json b/packages/meter/package.json index bca8e577d78..46fa241634c 100644 --- a/packages/meter/package.json +++ b/packages/meter/package.json @@ -70,10 +70,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/meter": "0.0.0-s2-foundations.2", - "@spectrum-css/progressbar": "5.0.0-s2-foundations.19" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/meter/src/spectrum-config.js b/packages/meter/src/spectrum-config.js deleted file mode 100644 index 4a27b5188d9..00000000000 --- a/packages/meter/src/spectrum-config.js +++ /dev/null @@ -1,107 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ProgressBar'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/progressbar', - outPackage: 'meter', - fileName: 'progress-bar', - components: [ - converter.classToHost(), - converter.classToClass('spectrum-ProgressBar-track'), - converter.classToClass('spectrum-ProgressBar-fill'), - converter.classToClass('spectrum-ProgressBar-label'), - converter.classToClass('spectrum-ProgressBar-percentage'), - converter.classToAttribute( - 'spectrum-ProgressBar--sideLabel', - 'side-label' - ), - converter.classToAttribute( - 'spectrum-ProgressBar--indeterminate' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-ProgressBar--staticBlack', 'black'], - ['spectrum-ProgressBar--staticWhite', 'white'], - ], - 'static-color' - ), - ], - excludeByComponents: [ - builder.class('spectrum-Meter--sizeS'), - builder.class('spectrum-Meter--sizeL'), - ], - }, - { - inPackage: '@spectrum-css/meter', - outPackage: 'meter', - fileName: 'meter', - components: [ - converter.classToHost(), - converter.classToHost('spectrum-Meter'), - ...converter.enumerateAttributes( - [ - ['spectrum-Meter--sizeS', 's'], - ['spectrum-Meter--sizeL', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['is-positive', 'positive'], - ['is-notice', 'notice'], - ['is-negative', 'negative'], - ], - 'variant' - ), - ], - }, - { - inPackage: '@spectrum-css/meter', - outPackage: 'meter', - fileName: 'meter', - components: [ - converter.classToHost(), - converter.classToHost('spectrum-Meter'), - ...converter.enumerateAttributes( - [ - ['spectrum-Meter--sizeS', 's'], - ['spectrum-Meter--sizeL', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['is-positive', 'positive'], - ['is-notice', 'notice'], - ['is-negative', 'negative'], - ], - 'variant' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/modal/package.json b/packages/modal/package.json index 21c8535473b..ebf945ff354 100644 --- a/packages/modal/package.json +++ b/packages/modal/package.json @@ -52,9 +52,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/modal": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/modal/src/spectrum-config.js b/packages/modal/src/spectrum-config.js deleted file mode 100644 index c7b9bc94d16..00000000000 --- a/packages/modal/src/spectrum-config.js +++ /dev/null @@ -1,118 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Modal'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/modal', - outPackage: 'modal', - fileName: 'modal-wrapper', - components: [ - converter.classToHost('spectrum-Modal-wrapper'), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-Modal--responsive'), - ], - excludeByComponents: [ - builder.class('spectrum-Modal'), - builder.class('spectrum-Modal--fullscreen'), - builder.class('spectrum-Modal--fullscreenTakeover'), - ], - }, - { - inPackage: '@spectrum-css/modal', - outPackage: 'modal', - fileName: 'modal', - hoistCustomPropertiesFrom: 'spectrum-Modal', - components: [ - { - find: [ - builder.class('spectrum-Modal--fullscreenTakeover'), - builder.class('is-open'), - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('open')], - }, - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.class('fullscreenTakeover'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Modal'), - builder.class('is-open'), - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('open')], - }, - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.class('modal'), - }, - ], - }, - { - find: [builder.class('spectrum-Modal--responsive')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('responsive')], - }, - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.class('modal'), - }, - ], - }, - converter.classToClass('spectrum-Modal', 'modal'), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-Modal--responsive'), - converter.classToClass('spectrum-Modal--fullscreen'), - converter.classToClass('spectrum-Modal--fullscreenTakeover'), - ], - excludeByComponents: [builder.class('spectrum-Modal-wrapper')], - }, - ], -}; - -export default config; diff --git a/packages/number-field/package.json b/packages/number-field/package.json index 60575547b6a..524b2a5818b 100644 --- a/packages/number-field/package.json +++ b/packages/number-field/package.json @@ -74,8 +74,7 @@ "@spectrum-web-components/textfield": "1.6.0" }, "devDependencies": { - "@formatjs/intl-numberformat": "^8.3.5", - "@spectrum-css/stepper": "7.1.3" + "@formatjs/intl-numberformat": "^8.3.5" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/number-field/src/spectrum-config.js b/packages/number-field/src/spectrum-config.js deleted file mode 100644 index b4361c8c6ab..00000000000 --- a/packages/number-field/src/spectrum-config.js +++ /dev/null @@ -1,272 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -// @ts-check -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -// Prepopulate a converter with the base class name of the package in question. -const converter = converterFor('spectrum-Stepper'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/stepper', - outPackage: 'number-field', - fileName: 'number-field', - hoistCustomPropertiesFrom: 'spectrum-Stepper', - components: [ - { - find: builder.pseudoClass('hover'), - replace: builder.pseudoClass('hover'), - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-focused')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('focused')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-disabled')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('disabled')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('is-invalid')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('invalid')]], - }, - hoist: true, - }, - { - exactSelector: true, - find: [builder.class('spectrum-Stepper--quiet')], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - ], - }, - { - expandSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-disabled'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - exactSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-focused'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.attribute('focused'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - exactSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-keyboardFocused'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.attribute('keyboard-focused'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - exactSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-focused'), - builder.class('is-invalid'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.attribute('focused'), - hoist: true, - }, - { - replace: builder.attribute('invalid'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - exactSelector: true, - find: [ - builder.class('spectrum-Stepper--quiet'), - builder.class('is-keyboardFocused'), - builder.class('is-invalid'), - ], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.attribute('keyboard-focused'), - hoist: true, - }, - { - replace: builder.attribute('invalid'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - converter.classToId('spectrum-Stepper', 'textfield'), - converter.classToAttribute('spectrum-Stepper--quiet'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute( - 'is-keyboardFocused', - 'keyboard-focused' - ), - converter.classToClass('spectrum-Stepper-buttons', 'buttons'), - converter.classToClass( - 'spectrum-Stepper-stepDown', - 'step-down' - ), - converter.classToClass( - 'spectrum-Stepper-textfield', - 'textfield' - ), - converter.classToClass('spectrum-Icon', 'stepper-icon'), - converter.classToClass('spectrum-Stepper-input', 'input'), - converter.classToClass('spectrum-Stepper-button', 'button'), - converter.classToClass( - 'spectrum-InfieldButton--top', - 'step-up' - ), - converter.classToClass( - 'spectrum-InfieldButton--bottom', - 'step-down' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Stepper--sizeS', 's'], - ['spectrum-Stepper--sizeM', 'm'], - ['spectrum-Stepper--sizeL', 'l'], - ['spectrum-Stepper--sizeXL', 'xl'], - ], - 'size' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json index 24d6efb3676..a02ded47c69 100644 --- a/packages/picker-button/package.json +++ b/packages/picker-button/package.json @@ -70,9 +70,6 @@ "@spectrum-web-components/icons-ui": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/pickerbutton": "6.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/picker-button/src/spectrum-config.js b/packages/picker-button/src/spectrum-config.js deleted file mode 100644 index e66907d6c16..00000000000 --- a/packages/picker-button/src/spectrum-config.js +++ /dev/null @@ -1,252 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-PickerButton'); - -/** - * @property {string} size - * @returns {import('../../../tasks/spectrum-css-converter').ComplexSelectorConversion[]} - */ -const convertSize = (size) => [ - { - collapseSelector: true, - find: [ - // .spectrum-PickerButton.spectrum-PickerButton--sizeS - builder.class('spectrum-PickerButton'), - builder.class('spectrum-PickerButton--size' + size.toUpperCase()), - ], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('size', size)], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('root'), - }, - ], - }, - { - // .spectrum-PickerButton.spectrum-PickerButton--textuiicon.spectrum-PickerButton--sizeXL - collapseSelector: true, - find: [ - builder.class('spectrum-PickerButton'), - builder.class('spectrum-PickerButton--textuiicon'), - builder.class('spectrum-PickerButton--size' + size.toUpperCase()), - ], - replace: [ - //:host([dir='ltr'][size='xl']) .root.textuiicon - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('size', size)], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('textuiicon'), - }, - ], - }, - // .spectrum-PickerButton.spectrum-PickerButton--icononly.spectrum-PickerButton--sizeXL - { - collapseSelector: true, - find: [ - builder.class('spectrum-PickerButton'), - builder.class('spectrum-PickerButton--icononly'), - builder.class('spectrum-PickerButton--size' + size.toUpperCase()), - ], - replace: [ - //:host([dir='ltr'][size='xl']) .root.textuiicon - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('size', size)], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('spectrum-PickerButton--icononly'), - }, - ], - }, - // .spectrum-PickerButton.spectrum-PickerButton--uiicononly.spectrum-PickerButton--sizeXL - { - collapseSelector: true, - find: [ - builder.class('spectrum-PickerButton'), - builder.class('spectrum-PickerButton--uiicononly'), - builder.class('spectrum-PickerButton--size' + size.toUpperCase()), - ], - replace: [ - //:host([dir='ltr'][size='xl']) .root.textuiicon - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [builder.attribute('size', size)], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.class('uiicononly'), - }, - ], - }, -]; - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/pickerbutton', - outPackage: 'picker-button', - fileName: 'picker-button', - components: [ - converter.classToClass('spectrum-PickerButton', 'root'), - converter.classToAttribute('is-focused', 'focused'), - { - find: [builder.pseudoClass('focus')], - replace: [ - { - replace: builder.pseudoClass('focus'), - hoist: false, - }, - ], - }, - { - find: [builder.pseudoClass('hover')], - replace: [ - { - replace: builder.pseudoClass('hover'), - hoist: false, - }, - ], - }, - { - find: [ - builder.class('spectrum-PickerButton'), - { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - ], - replace: [ - { - replace: builder.class('root'), - }, - { - replace: { - type: 'pseudo-element', - kind: 'custom', - name: '-moz-focus-inner', - }, - }, - ], - }, - converter.pseudoToAttribute('disabled', 'disabled'), - ...convertSize('s'), - ...convertSize('m'), - ...convertSize('l'), - ...convertSize('xl'), - converter.notToAttribute('is-open', 'open'), - converter.classToAttribute('is-open', 'open'), - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.pseudoClass('disabled')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('disabled')]], - }, - hoist: true, - }, - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - converter.classToAttribute('is-invalid', 'invalid'), - converter.notToAttribute('is-invalid', 'invalid'), - ...converter.enumerateAttributes( - [ - ['spectrum-PickerButton--right'], - ['spectrum-PickerButton--left'], - ], - 'position' - ), - converter.classToAttribute('spectrum-PickerButton--rounded'), - converter.notToAttribute( - 'spectrum-PickerButton--rounded', - 'rounded' - ), - converter.classToAttribute( - 'spectrum-PickerButton--quiet', - 'quiet' - ), - converter.classToClass('spectrum-PickerButton--uiicononly'), - converter.classToClass('spectrum-PickerButton--textuiicon'), - ], - excludeByComponents: [ - builder.class('spectrum--medium'), - builder.class('spectrum--large'), - ], - }, - ], -}; - -export default config; diff --git a/packages/picker/package.json b/packages/picker/package.json index a54a451a20a..a4f3f4a9c0b 100644 --- a/packages/picker/package.json +++ b/packages/picker/package.json @@ -103,9 +103,6 @@ "@spectrum-web-components/tooltip": "1.6.0", "@spectrum-web-components/tray": "1.6.0" }, - "devDependencies": { - "@spectrum-css/picker": "9.1.4" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/picker/src/spectrum-config.js b/packages/picker/src/spectrum-config.js deleted file mode 100644 index 9c4950da4a2..00000000000 --- a/packages/picker/src/spectrum-config.js +++ /dev/null @@ -1,124 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Picker'); -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/picker', - outPackage: 'picker', - fileName: 'picker', - hoistCustomPropertiesFrom: 'spectrum-Picker', - excludeByComponents: [builder.class('spectrum-Popover--bottom')], - components: [ - converter.classToId('spectrum-Picker', 'button'), - converter.classToAttribute('spectrum-Picker--quiet'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-loading', 'pending'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('is-focused', 'focused'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Picker--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Picker--sizeS', 's'], - ['spectrum-Picker--sizeL', 'l'], - ['spectrum-Picker--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass('spectrum-Picker-menuIcon', 'picker'), - converter.classToClass( - 'spectrum-Picker--sideLabel', - 'label-inline' - ), - converter.classToClass('spectrum-Menu-checkmark', 'checkmark'), - converter.classToClass( - 'spectrum-ProgressCircle', - 'progress-circle' - ), - converter.classToClass('is-placeholder', 'placeholder'), - converter.classToClass( - 'spectrum-Picker-validationIcon', - 'validation-icon' - ), - converter.classToClass('spectrum-Picker-icon', 'icon'), - converter.classToId('spectrum-Picker-trigger', 'button'), - converter.classToClass('spectrum-Picker-label', 'label'), - converter.classToId('spectrum-Picker-popover', 'popover'), - { - expandSelector: true, - find: [builder.class('spectrum-Picker--quiet')], - replace: [ - { - replace: builder.attribute('quiet'), - }, - { - replace: builder.combinator('descendant'), - }, - { - replace: builder.id('button'), - }, - ], - }, - { - // prevents hoisting .focus-ring to :host as :focus-visible - find: [builder.class('focus-ring')], - replace: [ - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, - { - // .spectrum-Picker .spectrum-Picker-icon - collapseSelector: true, - find: [ - builder.class('spectrum-Picker'), - builder.combinator('descendant'), - builder.class('spectrum-Picker-icon'), - ], - replace: [ - { - replace: builder.class('icon'), - }, - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('spectrum-Picker--quiet')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('quiet')]], - }, - hoist: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/popover/package.json b/packages/popover/package.json index 34dac0a43c6..919eae4c0a0 100644 --- a/packages/popover/package.json +++ b/packages/popover/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/overlay": "1.6.0" }, - "devDependencies": { - "@spectrum-css/popover": "8.2.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/popover/src/spectrum-config.js b/packages/popover/src/spectrum-config.js deleted file mode 100644 index c18099ff304..00000000000 --- a/packages/popover/src/spectrum-config.js +++ /dev/null @@ -1,50 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Popover'); -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/popover', - outPackage: 'popover', - fileName: 'popover', - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - converter.classToAttribute('spectrum-Popover--withTip', 'tip'), - ...converter.enumerateAttributes( - [ - ['spectrum-Popover--top', 'top'], - ['spectrum-Popover--bottom', 'bottom'], - ['spectrum-Popover--left', 'left'], - ['spectrum-Popover--right', 'right'], - ], - 'placement', - 'substring' - ), - converter.classToId('spectrum-Popover-tip', 'tip'), - converter.classToClass( - 'spectrum-Popover-tip-triangle', - 'triangle' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json index fd32d547eca..fafa4c08a69 100644 --- a/packages/progress-bar/package.json +++ b/packages/progress-bar/package.json @@ -69,9 +69,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/progressbar": "5.0.0-s2-foundations.19" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/progress-bar/src/spectrum-config.js b/packages/progress-bar/src/spectrum-config.js deleted file mode 100644 index 5d93081c9e4..00000000000 --- a/packages/progress-bar/src/spectrum-config.js +++ /dev/null @@ -1,77 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ProgressBar'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/progressbar', - outPackage: 'progress-bar', - fileName: 'progress-bar', - components: [ - converter.classToHost(), - converter.classToClass('spectrum-ProgressBar-track'), - converter.classToClass('spectrum-ProgressBar-fill'), - converter.classToClass('spectrum-ProgressBar-label'), - converter.classToClass('spectrum-ProgressBar-percentage'), - converter.classToAttribute( - 'spectrum-ProgressBar--sideLabel', - 'side-label' - ), - converter.classToAttribute('spectrum-ProgressBar-small'), - converter.classToAttribute( - 'spectrum-ProgressBar--indeterminate' - ), - converter.classToAttribute( - 'spectrum-ProgressBar--overBackground', - 'over-background' - ), - converter.classToAttribute('is-positive', 'positive'), - converter.classToAttribute('is-notice', 'notice'), - converter.classToAttribute('is-negative', 'negative'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-ProgressBar--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-ProgressBar--sizeS', 's'], - ['spectrum-ProgressBar--sizeL', 'l'], - ['spectrum-ProgressBar--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-ProgressBar--staticBlack', 'black'], - ['spectrum-ProgressBar--staticWhite', 'white'], - ], - 'static-color' - ), - ], - excludeByComponents: [ - builder.class('spectrum-Meter--sizeS'), - builder.class('spectrum-Meter--sizeL'), - ], - }, - ], -}; - -export default config; diff --git a/packages/progress-circle/package.json b/packages/progress-circle/package.json index ae75e93c7bf..feab374ae37 100644 --- a/packages/progress-circle/package.json +++ b/packages/progress-circle/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/progresscircle": "5.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/progress-circle/src/spectrum-config.js b/packages/progress-circle/src/spectrum-config.js deleted file mode 100644 index a8029e75903..00000000000 --- a/packages/progress-circle/src/spectrum-config.js +++ /dev/null @@ -1,65 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-ProgressCircle'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/progresscircle', - outPackage: 'progress-circle', - fileName: 'progress-circle', - excludeByComponents: [ - builder.class('spectrum-ProgressCircle--medium'), - ], - components: [ - converter.classToHost(), - converter.classToAttribute( - 'spectrum-ProgressCircle--indeterminate' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-ProgressCircle--small', 's'], - ['spectrum-ProgressCircle--large', 'l'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [['spectrum-ProgressCircle--staticWhite', 'white']], - 'static-color' - ), - converter.classToClass('spectrum-ProgressCircle-track'), - converter.classToClass('spectrum-ProgressCircle-fills'), - converter.classToClass('spectrum-ProgressCircle-fill'), - converter.classToClass('spectrum-ProgressCircle-fillMask1'), - converter.classToClass('spectrum-ProgressCircle-fillMask2'), - converter.classToClass('spectrum-ProgressCircle-fillSubMask1'), - converter.classToClass('spectrum-ProgressCircle-fillSubMask2'), - converter.classToClass( - 'spectrum-ProgressCircle--indeterminate-fill-submask-2', - 'fill-submask-2' - ), - ], - }, - ], -}; - -export default config; diff --git a/packages/radio/package.json b/packages/radio/package.json index 529a60af4f2..e43717a37ba 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -78,9 +78,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/radio": "10.0.0-s2-foundations.17" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/radio/src/spectrum-config.js b/packages/radio/src/spectrum-config.js deleted file mode 100644 index 6a199d6b15d..00000000000 --- a/packages/radio/src/spectrum-config.js +++ /dev/null @@ -1,143 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Radio'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/radio', - outPackage: 'radio', - fileName: 'radio', - components: [ - { - find: [builder.pseudoClass('focus')], - replace: [ - { - replace: builder.pseudoClass('focus-visible'), - hoist: true, - }, - ], - }, - { - // .spectrum-Radio-input:focus-visible+.spectrum-Radio-button:after - find: [ - builder.class('spectrum-Radio-input'), - builder.pseudoClass('focus-visible'), - builder.combinator('+'), - builder.class('spectrum-Radio-button'), - builder.pseudoElement('after'), - ], - // :host(:focus-visible) #input + #button:after - replace: [ - { - replace: builder.id('input'), - }, - { - replace: builder.pseudoClass('focus-visible'), - }, - { - replace: builder.combinator('+'), - }, - { - replace: builder.id('button'), - }, - { - replace: builder.pseudoElement('after'), - }, - ], - }, - { - find: [ - builder.class('spectrum-Radio-label'), - { - type: 'pseudo-class', - kind: 'lang', - }, - ], - replace: [ - { - replace: builder.id('label'), - }, - 'take', - ], - }, - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - { - find: builder.pseudoClass('active'), - hoist: true, - }, - converter.classToHost(), - converter.pseudoToAttribute('disabled', 'disabled'), - converter.pseudoToAttribute('checked', 'checked'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-readOnly', 'readonly'), - converter.classToAttribute('spectrum-Radio--emphasized'), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Radio--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Radio--sizeS', 's'], - ['spectrum-Radio--sizeL', 'l'], - ['spectrum-Radio--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToId('spectrum-Radio-input'), - converter.classToId('spectrum-Radio-button'), - converter.classToId('spectrum-Radio-label'), - { - find: [ - // .spectrum-Radio-button:after:dir(rtl) - builder.class('spectrum-Radio-button'), - builder.pseudoElement('after'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - // #button:dir(rtl):after - { - replace: builder.id('button'), - }, - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - builder.pseudoElement('after'), - ], - collapseSelector: true, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/search/package.json b/packages/search/package.json index 3535c121028..8ad8f2f7c81 100644 --- a/packages/search/package.json +++ b/packages/search/package.json @@ -70,9 +70,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/textfield": "1.6.0" }, - "devDependencies": { - "@spectrum-css/search": "8.1.2" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/search/src/search.css b/packages/search/src/search.css index bcbc01da1f9..27203707376 100644 --- a/packages/search/src/search.css +++ b/packages/search/src/search.css @@ -21,10 +21,6 @@ input::-webkit-search-cancel-button { display: none; } -/** - * Hardcoded values for the multiple search field sizes. - * Feel free to remove this if you find a better way to handle this on the spectrum-config. - **/ :host([size="s"]) #textfield { --spectrum-search-border-radius: var(--system-search-size-s-border-radius); --spectrum-search-edge-to-visual: var(--system-search-size-s-edge-to-visual); diff --git a/packages/search/src/spectrum-config.js b/packages/search/src/spectrum-config.js deleted file mode 100644 index 3be3e1e43ab..00000000000 --- a/packages/search/src/spectrum-config.js +++ /dev/null @@ -1,124 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Search'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/search', - outPackage: 'search', - fileName: 'search', - hoistCustomPropertiesFrom: 'spectrum-Search', - excludeByWholeSelector: [ - [ - builder.class('spectrum-Search'), - builder.class('spectrum-Search--sizeS'), - ], - [ - builder.class('spectrum-Search'), - builder.class('spectrum-Search--sizeXL'), - ], - [ - builder.class('spectrum-Search'), - builder.class('spectrum-Search--sizeL'), - ], - ], - components: [ - converter.classToId('spectrum-Search', 'textfield'), - converter.classToClass('spectrum-Search-input', 'input'), - converter.classToClass('spectrum-Icon', 'icon'), - converter.classToClass('spectrum-Search-icon', 'icon-search'), - converter.classToAttribute('spectrum-Search--quiet', 'quiet'), - converter.classToId('spectrum-Search-clearButton', 'button'), - converter.classToId('spectrum-Search-textfield', 'textfield'), - // Default to `size='m'` without needing the attribute - // converter.classToHost('spectrum-Search--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Search--sizeS', 's'], - ['spectrum-Search--sizeM', 'm'], - ['spectrum-Search--sizeL', 'l'], - ['spectrum-Search--sizeXL', 'xl'], - ], - 'size' - ), - { - find: [builder.class('spectrum-Search--sizeS')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 's'), - }, - ], - }, - { - find: [builder.class('spectrum-Search--sizeL')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 'l'), - }, - ], - }, - { - find: [builder.class('spectrum-Search--sizeXL')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 'xl'), - }, - ], - }, - - { - find: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.class('spectrum-Search--quiet')]], - }, - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('quiet')]], - }, - hoist: true, - }, - { - find: [builder.class('focus-ring')], - replace: [ - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/sidenav/package.json b/packages/sidenav/package.json index 3006d6daf16..7400bc81597 100644 --- a/packages/sidenav/package.json +++ b/packages/sidenav/package.json @@ -88,9 +88,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/sidenav": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/sidenav/src/spectrum-config.js b/packages/sidenav/src/spectrum-config.js deleted file mode 100644 index 81db55f1956..00000000000 --- a/packages/sidenav/src/spectrum-config.js +++ /dev/null @@ -1,152 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Sidenav'); -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/sidenav', - outPackage: 'sidenav', - fileName: 'sidenav', - components: [ - converter.classToHost('spectrum-SideNav'), - converter.classToAttribute( - 'spectrum-SideNav--multiLevel', - 'multilevel' - ), - ], - excludeByComponents: [ - builder.class('spectrum-SideNav-item'), - builder.class('spectrum-SideNav-itemLink'), - builder.class('spectrum-SideNav-heading'), - ], - }, - { - inPackage: '@spectrum-css/sidenav', - outPackage: 'sidenav', - fileName: 'sidenav-item', - components: [ - converter.classToHost('spectrum-SideNav-item'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToId('spectrum-SideNav-itemLink', 'item-link'), - converter.classToId('spectrum-SideNav-link-text', 'link-text'), - converter.classToId('spectrum-SideNav', 'list'), - converter.classToSlotted('spectrum-Icon', 'icon'), - { - // prevents hoisting .focus-ring to :host as :focus-visible - find: [builder.class('focus-ring')], - replace: [ - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, - { - // .spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink - find: [ - builder.class('spectrum-SideNav--multiLevel'), - builder.combinator(' '), - builder.class('spectrum-SideNav-itemLink'), - ], - replace: [ - { - replace: builder.id('item-link'), - }, - { - replace: builder.attribute('data-level'), - hoist: false, - }, - ], - collapseSelector: true, - }, - { - // .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink - find: [ - builder.class('spectrum-SideNav--multiLevel'), - builder.combinator(' '), - builder.class('spectrum-SideNav'), - builder.combinator(' '), - builder.class('spectrum-SideNav-itemLink'), - ], - replace: [ - { - replace: builder.id('item-link'), - }, - { - replace: { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.attribute('data-level', '0')], - ], - }, - hoist: false, - }, - ], - collapseSelector: true, - }, - { - // .spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink - find: [ - builder.class('spectrum-SideNav--multiLevel'), - builder.combinator(' '), - builder.class('spectrum-SideNav'), - builder.combinator(' '), - builder.class('spectrum-SideNav'), - builder.combinator(' '), - builder.class('spectrum-SideNav-itemLink'), - ], - replace: [ - { - replace: builder.id('item-link'), - }, - { - replace: builder.attribute('data-level', '2'), - hoist: false, - }, - ], - collapseSelector: true, - }, - ], - excludeByWholeSelector: [ - [builder.class('spectrum-SideNav-heading')], - ], - }, - { - inPackage: '@spectrum-css/sidenav', - outPackage: 'sidenav', - fileName: 'sidenav-heading', - components: [ - converter.classToId('spectrum-SideNav-heading', 'heading'), - converter.classToId('spectrum-SideNav-heading', 'heading'), - converter.classToId('spectrum-SideNav', 'list'), - ], - excludeByComponents: [ - builder.class('spectrum-SideNav-item'), - builder.class('spectrum-SideNav-itemLink'), - builder.class('spectrum-SideNav--multiLevel'), - ], - }, - ], -}; - -export default config; diff --git a/packages/slider/package.json b/packages/slider/package.json index 998e7059ef3..9188376bac4 100644 --- a/packages/slider/package.json +++ b/packages/slider/package.json @@ -89,9 +89,6 @@ "@spectrum-web-components/shared": "1.6.0", "@spectrum-web-components/theme": "1.6.0" }, - "devDependencies": { - "@spectrum-css/slider": "6.3.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css index 16d1bb97262..f2485f8c4e6 100644 --- a/packages/slider/src/slider.css +++ b/packages/slider/src/slider.css @@ -14,11 +14,8 @@ governing permissions and limitations under the License. @import url("./slider-overrides.css"); /* - * Removes blue outline from :host when it is being focused. - * This situation is not addressed in spectrum-css because the slider element itself - * is not intended to receive focus. - * This is not the case with web-components. The :host will receive focus when - * interacting with the slider via the mouse. + * The :host will receive focus when interacting with the slider via the mouse. + * Removes blue outline from :host when it is being focused. */ :host(:focus) { outline: 0; diff --git a/packages/slider/src/spectrum-config.js b/packages/slider/src/spectrum-config.js deleted file mode 100644 index 4dd84bc8a84..00000000000 --- a/packages/slider/src/spectrum-config.js +++ /dev/null @@ -1,205 +0,0 @@ -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Slider'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/slider', - outPackage: 'slider', - fileName: 'slider', - hoistCustomPropertiesFrom: 'spectrum-Slider', - excludeByWholeSelector: [ - [ - builder.attribute('dir'), - builder.combinator(' '), - builder.attribute('dir'), - builder.combinator(' '), - builder.class('spectrum-Slider--range'), - builder.combinator(' '), - builder.class('spectrum-Slider-track'), - ], - ], - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - { - exactSelector: true, - find: [builder.class('spectrum-Slider--tick')], - replace: [ - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'attribute', - name: 'tick-labels', - }, - ], - }, - }, - ], - }, - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Slider--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Slider--sizeS', 's'], - ['spectrum-Slider--sizeL', 'l'], - ['spectrum-Slider--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Slider--color', 'color'], - ['spectrum-Slider--filled', 'filled'], - ['spectrum-Slider--ramp', 'ramp'], - ['spectrum-Slider--range', 'range'], - ['spectrum-Slider--tick', 'tick'], - ], - 'variant' - ), - { - find: [ - builder.class('spectrum-Slider-labelContainer'), - builder.combinator('+'), - builder.class('spectrum-Slider-controls'), - ], - replace: [ - { - replace: builder.id('label-container'), - }, - { - replace: builder.combinator('+'), - }, - { - replace: builder.id('track'), - }, - ], - }, - converter.classToId('spectrum-Slider-buffer', 'buffer'), - converter.classToId('spectrum-Slider-controls', 'controls'), - converter.classToId('spectrum-Slider-label', 'label'), - converter.classToId( - 'spectrum-Slider-labelContainer', - 'label-container' - ), - converter.classToId('spectrum-Slider-ramp', 'ramp'), - converter.classToId('spectrum-Slider-value', 'value'), - converter.classToClass('spectrum-Slider-handle', 'handle'), - converter.classToClass('spectrum-Slider-input', 'input'), - converter.classToClass('spectrum-Slider-tick', 'tick'), - converter.classToClass('spectrum-Slider-fill--right', 'offset'), - converter.classToClass('spectrum-Slider-fill', 'fill'), - converter.classToClass( - 'spectrum-Slider-tickLabel', - 'tickLabel' - ), - converter.classToClass('spectrum-Slider-ticks', 'ticks'), - converter.classToClass( - 'spectrum-Slider-trackContainer', - 'trackContainer' - ), - converter.classToClass( - 'spectrum-Slider-handleContainer', - 'handleContainer' - ), - converter.classToClass('spectrum-Slider-track', 'track'), - converter.classToClass('is-focused', 'handle-highlight'), - converter.classToClass('is-dragged', 'dragging'), - { - find: [ - builder.class('spectrum-Slider-controls'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'has', - selectors: [ - [ - builder.class( - 'spectrum-Slider-ticks' - ), - ], - ], - }, - ], - ], - }, - ], - replace: [ - { - replace: builder.id('controls'), - }, - { - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'has', - selectors: [ - [builder.class('ticks')], - ], - }, - ], - ], - }, - }, - ], - }, - { - find: [ - // .spectrum-Slider-handle:before:dir(rtl) - builder.class('spectrum-Slider-handle'), - builder.pseudoElement('before'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - // .handle:dir(rtl):before - { - replace: builder.class('handle'), - }, - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - builder.pseudoElement('before'), - ], - collapseSelector: true, - }, - ], - }, - ], -}; -export default config; diff --git a/packages/split-view/package.json b/packages/split-view/package.json index ce68c696d84..efd52c457de 100644 --- a/packages/split-view/package.json +++ b/packages/split-view/package.json @@ -71,9 +71,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/splitview": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/split-view/src/spectrum-config.js b/packages/split-view/src/spectrum-config.js deleted file mode 100644 index 3e12e9c60a7..00000000000 --- a/packages/split-view/src/spectrum-config.js +++ /dev/null @@ -1,84 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-SplitView'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/splitview', - outPackage: 'split-view', - fileName: 'split-view', - hoistCustomPropertiesFrom: 'spectrum-SplitView', - components: [ - converter.classToHost('spectrum-SplitView'), - converter.classToAttribute('spectrum-SplitView--vertical'), - converter.classToId('spectrum-SplitView-splitter'), - converter.classToId('spectrum-SplitView-gripper'), - converter.classToSlotted('spectrum-SplitView-pane'), - { - find: [ - builder.class('spectrum-SplitView-splitter'), - builder.class('focus-ring'), - ], - replace: [ - { replace: builder.id('splitter') }, - { - replace: builder.pseudoClass('focus-visible'), - hoist: false, - }, - ], - }, - { - find: [ - builder.class('spectrum-SplitView-splitter'), - builder.class('is-draggable'), - ], - replace: [ - { replace: builder.id('splitter') }, - { - replace: builder.attribute('resizable'), - hoist: true, - }, - ], - }, - { - find: [ - builder.class('spectrum-SplitView-splitter'), - builder.class('is-draggable'), - builder.class('focus-ring'), - ], - replace: [ - { replace: builder.id('splitter') }, - { - replace: builder.attribute('resizable'), - hoist: true, - }, - { - replace: builder.pseudoClass('focus-visible'), - hoist: false, - }, - ], - }, - ], - }, - ], -}; diff --git a/packages/status-light/package.json b/packages/status-light/package.json index 21c2c64d891..45bc3ec8595 100644 --- a/packages/status-light/package.json +++ b/packages/status-light/package.json @@ -66,9 +66,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/statuslight": "9.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/status-light/src/spectrum-config.js b/packages/status-light/src/spectrum-config.js deleted file mode 100644 index 864e6c03d48..00000000000 --- a/packages/status-light/src/spectrum-config.js +++ /dev/null @@ -1,81 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-StatusLight'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/statuslight', - outPackage: 'status-light', - fileName: 'status-light', - components: [ - converter.classToHost(), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('spectrum-StatusLight--active'), - ...converter.enumerateAttributes( - [ - ['spectrum-StatusLight--negative', 'negative'], - ['spectrum-StatusLight--notice', 'notice'], - ['spectrum-StatusLight--positive', 'positive'], - ['spectrum-StatusLight--info', 'info'], - ['spectrum-StatusLight--neutral', 'neutral'], - ['spectrum-StatusLight--yellow', 'yellow'], - ['spectrum-StatusLight--fuchsia', 'fuchsia'], - ['spectrum-StatusLight--indigo', 'indigo'], - ['spectrum-StatusLight--seafoam', 'seafoam'], - ['spectrum-StatusLight--chartreuse', 'chartreuse'], - ['spectrum-StatusLight--magenta', 'magenta'], - ['spectrum-StatusLight--purple', 'purple'], - ['spectrum-StatusLight--celery', 'celery'], - ], - 'variant' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-StatusLight--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-StatusLight--sizeS', 's'], - ['spectrum-StatusLight--sizeL', 'l'], - ['spectrum-StatusLight--sizeXL', 'xl'], - ], - 'size' - ), - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - { - exactSelector: true, - find: [builder.class('spectrum-StatusLight')], - replace: [ - { - replace: builder.attribute('dir'), - }, - ], - }, - ], - }, - ], -}; diff --git a/packages/swatch/package.json b/packages/swatch/package.json index 56703f68740..518d7bbca59 100644 --- a/packages/swatch/package.json +++ b/packages/swatch/package.json @@ -82,10 +82,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/swatch": "7.0.0-s2-foundations.17", - "@spectrum-css/swatchgroup": "4.0.0-s2-foundations.15" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/swatch/src/spectrum-config.js b/packages/swatch/src/spectrum-config.js deleted file mode 100644 index 9dd8cab4e63..00000000000 --- a/packages/swatch/src/spectrum-config.js +++ /dev/null @@ -1,123 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Swatch'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/swatchgroup', - outPackage: 'swatch', - fileName: 'swatch-group', - hoistCustomPropertiesFrom: 'spectrum-SwatchGroup', - components: [ - converter.classToHost('spectrum-SwatchGroup'), - ...converter.enumerateAttributes( - [ - ['spectrum-SwatchGroup--compact', 'compact'], - ['spectrum-SwatchGroup--spacious', 'spacious'], - ], - 'density' - ), - ], - }, - { - inPackage: '@spectrum-css/swatch', - outPackage: 'swatch', - fileName: 'swatch', - hoistCustomPropertiesFrom: 'spectrum-Swatch', - excludeByComponents: [builder.class('🤫')], - components: [ - converter.classToHost('spectrum-Swatch'), - ...converter.enumerateAttributes( - [ - ['spectrum-Swatch--lightBorder', 'light'], - ['spectrum-Swatch--noBorder', 'none'], - ], - 'border' - ), - ...converter.enumerateAttributes( - [ - ['spectrum-Swatch--roundingNone', 'none'], - ['spectrum-Swatch--roundingFull', 'full'], - ], - 'rounding' - ), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-mixedValue', 'mixed-value'), - converter.classToAttribute('is-nothing', 'nothing'), - converter.classToAttribute('is-disabled', 'disabled'), - ...converter.enumerateAttributes( - [['spectrum-Swatch--rectangle', 'rectangle']], - 'shape' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Swatch--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Swatch--sizeXS', 'xs'], - ['spectrum-Swatch--sizeS', 's'], - ['spectrum-Swatch--sizeL', 'l'], - ], - 'size' - ), - converter.classToClass('spectrum-Swatch-fill'), - converter.classToClass('spectrum-Swatch-disabledIcon'), - converter.classToClass('spectrum-Swatch-mixedValueIcon'), - converter.classToSlotted('spectrum-Swatch-image', 'image'), - { - find: [ - builder.class('spectrum-Swatch'), - builder.pseudoClass('focus-visible'), - builder.pseudoElement('after'), - ], - replace: [ - { - replace: builder.pseudoClass('host'), - }, - { - replace: builder.pseudoClass('focus-visible'), - hoist: true, - }, - { - replace: builder.pseudoElement('after'), - }, - ], - }, - { - find: { - kind: 'not', - type: 'pseudo-class', - selectors: [ - [builder.class('spectrum-Swatch--rectangle')], - ], - }, - replace: { - kind: 'not', - type: 'pseudo-class', - selectors: [[builder.attribute('shape', 'rectangle')]], - }, - hoist: true, - }, - ], - }, - ], -}; diff --git a/packages/switch/package.json b/packages/switch/package.json index d666201d6e5..da34505ced8 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -68,9 +68,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/checkbox": "1.6.0" }, - "devDependencies": { - "@spectrum-css/switch": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/switch/src/spectrum-config.js b/packages/switch/src/spectrum-config.js deleted file mode 100644 index 12d81f0c78c..00000000000 --- a/packages/switch/src/spectrum-config.js +++ /dev/null @@ -1,73 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Switch'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/switch', - outPackage: 'switch', - fileName: 'switch', - components: [ - { - find: [ - builder.class('spectrum-Switch-input'), - builder.pseudoClass('focus-visible'), - ], - replace: [ - { - replace: builder.id('input'), - }, - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, - { - find: builder.pseudoClass('active'), - replace: builder.pseudoClass('active'), - hoist: true, - }, - converter.classToHost(), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Switch--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Switch--sizeS', 's'], - ['spectrum-Switch--sizeL', 'l'], - ['spectrum-Switch--sizeXL', 'xl'], - ], - 'size' - ), - converter.pseudoToAttribute('disabled', 'disabled'), - converter.pseudoToAttribute('checked', 'checked'), - converter.classToAttribute('spectrum-Switch--emphasized'), - converter.classToAttribute('spectrum-Switch--disabled'), - converter.classToId('spectrum-Switch-input'), - converter.classToId('spectrum-Switch-switch'), - converter.classToId('spectrum-Switch-label'), - ], - }, - ], -}; - -export default config; diff --git a/packages/switch/src/switch-legacy.css b/packages/switch/src/switch-legacy.css index 0eb93e832b1..470c8f35656 100644 --- a/packages/switch/src/switch-legacy.css +++ b/packages/switch/src/switch-legacy.css @@ -11,8 +11,8 @@ governing permissions and limitations under the License. */ #switch::before { - /* This rule includes all of the transitions from spectrum-css except the - * one for the transform attribute, which causes issue in Edge. + /* This rule includes all of the transitions from spectrum-css before we removed the package as a dependency + * except the one for the transform attribute, which causes issue in Edge. */ transition: background var(--spectrum-animation-duration-100, 0.13s) ease-in-out, diff --git a/packages/table/package.json b/packages/table/package.json index d7dc13bb9ff..2df55192e90 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -134,9 +134,6 @@ "@spectrum-web-components/icon": "1.6.0", "@spectrum-web-components/icons-ui": "1.6.0" }, - "devDependencies": { - "@spectrum-css/table": "8.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/table/src/spectrum-config.js b/packages/table/src/spectrum-config.js deleted file mode 100644 index 433f587ff73..00000000000 --- a/packages/table/src/spectrum-config.js +++ /dev/null @@ -1,319 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Table'); -const converterCell = converterFor('spectrum-Table-cell'); -const converterHeadCell = converterFor('spectrum-Table-headCell'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table', - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-Table--quiet'), - converter.classToAttribute('spectrum-Table--emphasized'), - ...converter.enumerateAttributes( - [ - ['spectrum-Table--sizeS', 's'], - ['spectrum-Table--sizeL', 'l'], - ['spectrum-Table--sizeXL', 'xl'], - ], - 'size' - ), - ...converter.enumerateAttributes( - [['spectrum-Table--compact'], ['spectrum-Table--spacious']], - 'density' - ), - ], - excludeByComponents: [ - builder.class('spectrum-Table-sortedIcon'), - builder.class('spectrum-Table-headCell'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(?!-)/, - }, - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-body', - components: [ - converter.classToHost('spectrum-Table-body'), - converter.classToAttribute('is-drop-target', 'drop-target'), - ], - excludeByComponents: [ - builder.class('spectrum-Table'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(?!b)/, - }, - builder.element('tbody'), - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-cell', - components: [ - converterCell.classToHost(), - ...converterCell.enumerateAttributes( - [ - ['spectrum-Table-cell--alignCenter', 'center'], - ['spectrum-Table-cell--alignRight', 'end'], - ], - 'align' - ), - converterCell.classToClass('spectrum-Table-cell--divider'), - converterCell.classToAttribute('is-focused', 'focused'), - ], - excludeByComponents: [ - builder.class('spectrum-Table'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(?!cell)/, - }, - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-checkbox-cell', - components: [ - converterHeadCell.classToAttribute( - 'spectrum-Table-headCell', - 'head-cell' - ), - converter.classToAttribute('is-sortable', 'sortable'), - converter.classToAttribute('is-focused', 'focused'), - converter.pseudoToAttribute('active', 'active'), - { - find: [builder.class('spectrum-Table-cell')], - replace: [ - //:host(:not([head-cell])) - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.attribute('head-cell')], - ], - }, - ], - }, - }, - ], - }, - { - find: [builder.class('spectrum-Table-checkboxCell')], - replace: [ - //:host(:host) for increased specificity, to be higher than [head-cell] selectors. - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - { - type: 'pseudo-class', - kind: 'host', - }, - ], - }, - }, - ], - }, - { - find: [builder.class('spectrum-Table-checkbox')], - replace: [ - { - replace: { - type: 'type', - name: 'sp-checkbox', - }, - }, - ], - }, - ], - excludeByComponents: [ - builder.class('spectrum-Table'), - // Also include all Table-cell and Table-headCell classes. - // They are converted to selectors with or without the [head-cell] attribute. - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(?!checkbox|headCell|cell)/, - }, - builder.class('is-sortable'), - // Unneeded cell modifier classes (align*, collapsible, divider). - { - type: 'class', - regex: /spectrum-Table-cell--/, - name: 'regex', - }, - builder.element('div'), - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-head', - components: [converter.classToHost('spectrum-Table-head')], - requireComponentPresence: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-head$/, - }, - ], - excludeByComponents: [builder.attribute('role')], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-head-cell', - components: [ - converterHeadCell.classToHost(), - converterHeadCell.classToAttribute('is-sortable', 'sortable'), - converterHeadCell.classToAttribute('is-focused', 'focused'), - converterHeadCell.pseudoToAttribute('active', 'active'), - ...converterHeadCell.enumerateAttributes( - [ - ['is-sorted-asc', 'asc'], - ['is-sorted-desc', 'desc'], - ], - 'sort-direction' - ), - converterHeadCell.classToClass( - 'spectrum-Table-sortedIcon', - 'sortedIcon' - ), - ], - requireComponentPresence: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-(headCell|sortedIcon)$/, - }, - ], - excludeByComponents: [ - { - type: 'class', - regex: /spectrum-Table--/, - name: 'regex', - }, - ], - }, - { - inPackage: '@spectrum-css/table', - outPackage: 'table', - fileName: 'table-row', - components: [ - converter.classToHost('spectrum-Table-row'), - { - find: builder.pseudoClass('first-child'), - replace: builder.pseudoClass('first-child'), - hoist: true, - }, - { - find: builder.pseudoClass('last-child'), - replace: builder.pseudoClass('last-child'), - hoist: true, - }, - converter.classToAttribute( - 'spectrum-Table-row--emphasized', - 'emphasized' - ), - converter.classToAttribute('is-drop-target', 'drop-target'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToSlotted('spectrum-Table-cell'), - { - find: [ - builder.class('spectrum-Table-cell'), - builder.pseudoClass('first-child'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('first-child')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - find: [ - builder.class('spectrum-Table-cell'), - builder.pseudoClass('last-child'), - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [builder.pseudoClass('last-child')], - }, - }, - { - replace: builder.combinator(' '), - }, - ], - }, - ], - requireComponentPresence: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Table-row/, - }, - ], - excludeByComponents: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Table--/, - }, - { - type: 'class', - name: 'regex', - regex: /spectrum-Table$/, - }, - builder.element('tbody'), - ], - }, - ], -}; - -export default config; diff --git a/packages/tabs/package.json b/packages/tabs/package.json index f357dfd9f3f..45cece24501 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -101,9 +101,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/tabs": "6.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/tabs/src/spectrum-config.js b/packages/tabs/src/spectrum-config.js deleted file mode 100644 index 434eb3ee1a0..00000000000 --- a/packages/tabs/src/spectrum-config.js +++ /dev/null @@ -1,395 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Tabs'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/tabs', - outPackage: 'tabs', - fileName: 'tabs', - components: [ - { - // .spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator) - find: [ - builder.class('spectrum-Tabs--horizontal'), - builder.combinator(' '), - builder.class('spectrum-Tabs-item'), - builder.combinator('+'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - builder.class( - 'spectrum-Tabs-selectionIndicator' - ), - ], - ], - }, - ], - replace: [ - //:host([direction^='horizontal']) ::slotted(:not([slot])):not(.spectrum-Tabs-selectionIndicator) - { - replace: { - type: 'pseudo-class', - kind: 'host', - selectors: [ - builder.attribute( - 'direction', - 'horizontal', - 'prefix' - ), - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - builder.pseudoClass( - 'first-child' - ), - ], - ], - }, - ], - }, - }, - ], - collapseSelector: true, - }, - { - exactSelector: true, - find: [builder.class('spectrum-Tabs--quiet')], - replace: [ - { - replace: builder.attribute('quiet'), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('list'), - }, - ], - }, - { - expandSelector: true, - find: [builder.class('spectrum-Tabs--horizontal')], - replace: [ - { - replace: builder.attribute( - 'direction', - 'horizontal', - 'prefix' - ), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('list'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - expandSelector: true, - find: [builder.class('spectrum-Tabs--vertical')], - replace: [ - { - replace: builder.attribute( - 'direction', - 'vertical', - 'prefix' - ), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('list'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - expandSelector: true, - find: [builder.class('spectrum-Tabs--vertical-right')], - replace: [ - { - replace: builder.attribute( - 'direction', - 'vertical-right', - 'prefix' - ), - hoist: true, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('list'), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - { - collapseSelector: true, - find: [ - builder.class('spectrum-Tabs-item'), - builder.combinator('+'), - { type: 'universal' }, - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - builder.class( - 'spectrum-Tabs-selectionIndicator' - ), - ], - ], - }, - ], - replace: [ - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [builder.attribute('slot')], - ], - }, - { - type: 'pseudo-class', - kind: 'not', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'first-child', - }, - ], - ], - }, - ], - }, - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.combinator(' '), - }, - ], - }, - converter.classToId('spectrum-Tabs', 'list'), - converter.classToAttribute('spectrum-Tabs--compact'), - converter.classToAttribute('spectrum-Tabs--quiet'), - converter.classToAttribute('spectrum-Tabs--emphasized'), - converter.classToId( - 'spectrum-Tabs-selectionIndicator', - 'selection-indicator' - ), - { - find: builder.class('spectrum-Tabs-item'), - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('slot')]], - }, - ], - }, - }, - { - find: builder.class('is-selected'), - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.attribute('selected'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('slot')]], - }, - ], - }, - }, - { - find: builder.class('is-disabled'), - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.attribute('disabled'), - { - type: 'pseudo-class', - kind: 'not', - selectors: [[builder.attribute('slot')]], - }, - ], - }, - }, - ], - excludeByComponents: [ - builder.class('spectrum-Tabs-itemLabel'), - builder.class('spectrum-Icon'), - builder.pseudoClass('hover'), - { - type: 'class', - name: 'regex', - regex: /spectrum-Tabs--size/, - }, - ], - excludeByWholeSelector: [ - [builder.class('spectrum-Tabs-item')], - [ - builder.class('spectrum-Tabs-item'), - builder.pseudoElement('before'), - ], - [ - builder.class('spectrum-Tabs-item'), - builder.class('focus-ring'), - builder.pseudoElement('before'), - ], - [ - builder.class('spectrum-Tabs-item'), - builder.pseudoClass('focus-visible'), - ], - [ - builder.class('spectrum-Tabs-item'), - builder.pseudoClass('focus-visible'), - builder.pseudoElement('before'), - ], - [ - // .spectrum-Tabs .is-selected:focus - builder.class('spectrum-Tabs'), - builder.combinator(' '), - builder.class('is-selected'), - builder.pseudoClass('focus'), - ], - [ - // .spectrum-Tabs .is-selected:focus-visible - builder.class('spectrum-Tabs'), - builder.combinator(' '), - builder.class('is-selected'), - builder.pseudoClass('focus-visible'), - ], - ], - }, - { - inPackage: '@spectrum-css/tabs', - outPackage: 'tabs', - fileName: 'tab', - components: [ - // .spectrum-Icon+.spectrum-Tabs-itemLabel - // slot[name='icon'] + #item-label - { - find: [ - builder.class('spectrum-Icon'), - builder.combinator('+'), - builder.class('spectrum-Tabs-itemLabel'), - ], - replace: [ - { - replace: builder.attribute('name', 'icon'), - hoist: false, - }, - ], - }, - converter.classToHost('spectrum-Tabs-item'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToId('spectrum-Tabs-itemLabel', 'item-label'), - converter.classToSlotted('spectrum-Icon', 'icon'), - ], - excludeByComponents: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Tabs--/, - }, - builder.class('spectrum-Tabs'), - builder.class('spectrum-Tabs-selectionIndicator'), - ], - }, - { - inPackage: '@spectrum-css/tabs', - outPackage: 'tabs', - fileName: 'tabs-sizes', - components: [ - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Tabs--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Tabs--sizeS', 's'], - ['spectrum-Tabs--sizeL', 'l'], - ['spectrum-Tabs--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToId('spectrum-Tabs', 'list'), - ], - requireComponentPresence: [ - { - type: 'class', - name: 'regex', - regex: /spectrum-Tabs--size/, - }, - ], - }, - ], -}; - -export default config; diff --git a/packages/tags/package.json b/packages/tags/package.json index 923b6e5ae75..0bfaae33f6f 100644 --- a/packages/tags/package.json +++ b/packages/tags/package.json @@ -79,10 +79,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/tag": "10.1.0", - "@spectrum-css/taggroup": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/tags/src/spectrum-config.js b/packages/tags/src/spectrum-config.js deleted file mode 100644 index e460aa7db17..00000000000 --- a/packages/tags/src/spectrum-config.js +++ /dev/null @@ -1,112 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Tag'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/taggroup', - outPackage: 'tags', - fileName: 'tags', - components: [ - converter.classToHost('spectrum-TagGroup'), - { - find: builder.class('spectrum-TagGroup-item'), - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - { - type: 'universal', - }, - ], - }, - }, - ], - }, - { - inPackage: '@spectrum-css/tag', - outPackage: 'tags', - fileName: 'tag', - components: [ - { - find: { - type: 'pseudo-class', - kind: 'active', - }, - replace: { - type: 'pseudo-class', - kind: 'is', - selectors: [ - [ - { - type: 'pseudo-class', - kind: 'active', - }, - ], - [ - { - type: 'attribute', - name: 'active', - }, - ], - ], - }, - hoist: true, - }, - { - find: builder.pseudoClass('focus-visible'), - hoist: true, - }, - converter.classToHost(), - converter.classToAttribute('is-emphasized', 'emphasized'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute( - 'spectrum-Tag--removable', - 'deletable' - ), - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Tag--sizeM'), - ...converter.enumerateAttributes( - [ - ['spectrum-Tag--sizeS', 's'], - ['spectrum-Tag--sizeL', 'l'], - ], - 'size' - ), - converter.classToClass( - 'spectrum-Tag-clearButton', - 'clear-button' - ), - converter.classToClass('spectrum-ClearButton', 'clear-button'), - converter.classToClass('spectrum-Tag-itemLabel', 'label'), - converter.classToSlotted('spectrum-Avatar', 'avatar'), - converter.classToSlotted('spectrum-Tag-itemIcon', 'icon'), - ], - }, - ], -}; - -export default config; diff --git a/packages/textfield/package.json b/packages/textfield/package.json index 39396c60ae5..f8eb2baa2a5 100644 --- a/packages/textfield/package.json +++ b/packages/textfield/package.json @@ -71,9 +71,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/textfield": "8.1.1" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/textfield/src/spectrum-config.js b/packages/textfield/src/spectrum-config.js deleted file mode 100644 index fec9c085e58..00000000000 --- a/packages/textfield/src/spectrum-config.js +++ /dev/null @@ -1,158 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Textfield'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/textfield', - outPackage: 'textfield', - fileName: 'textfield', - hoistCustomPropertiesFrom: 'spectrum-Textfield', - excludeByComponents: [builder.class('🤫')], - components: [ - converter.classToId('spectrum-Textfield', 'textfield'), - converter.classToClass('spectrum-Textfield-input', 'input'), - { - find: [ - builder.class('spectrum-Textfield-input'), - builder.class('focus-ring'), - ], - replace: [ - { replace: builder.class('input') }, - { replace: builder.pseudoClass('focus-visible') }, - ], - hoist: false, - }, - // Default to `size='m'` without needing the attribute - converter.classToHost('spectrum-Textfield--sizeM'), - { - find: [builder.class('spectrum-Textfield--sizeS')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 's'), - }, - ], - }, - { - find: [builder.class('spectrum-Textfield--sizeL')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 'l'), - }, - ], - }, - { - find: [builder.class('spectrum-Textfield--sizeXL')], - replace: [ - { - replace: builder.id('textfield'), - }, - { - replace: builder.attribute('size', 'xl'), - }, - ], - }, - { - // .spectrum-Textfield--quiet:after - find: [ - builder.class('spectrum-Textfield--quiet'), - builder.pseudoElement('after'), - ], - // :host([quiet]) #textfield:after { - replace: [ - { - replace: builder.attribute('quiet'), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.pseudoElement('after'), - }, - ], - }, - { - // .spectrum-Textfield--quiet.is-keyboardFocused:after - find: [ - builder.class('spectrum-Textfield--quiet'), - builder.class('is-keyboardFocused'), - builder.pseudoElement('after'), - ], - // :host([quiet][focused]) #textfield:after - replace: [ - { - replace: builder.attribute('quiet'), - }, - { - replace: builder.attribute('focused'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('textfield'), - }, - { - replace: builder.pseudoElement('after'), - }, - ], - }, - ...converter.enumerateAttributes( - [ - ['spectrum-Textfield--sizeS', 's'], - ['spectrum-Textfield--sizeL', 'l'], - ['spectrum-Textfield--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToClass( - 'spectrum-Textfield-validationIcon', - 'icon' - ), - converter.classToClass( - 'spectrum-Textfield-icon', - 'icon-workflow' - ), - converter.classToClass('spectrum-Search-icon', 'icon-search'), - converter.classToAttribute('spectrum-Textfield--multiline'), - converter.classToAttribute('spectrum-Textfield--quiet'), - converter.classToAttribute( - 'spectrum-Textfield--grows', - 'grows' - ), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-keyboardFocused', 'focused'), - converter.classToAttribute('is-valid', 'valid'), - converter.classToAttribute('is-invalid', 'invalid'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('is-readOnly', 'readonly'), - ], - }, - ], -}; diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json index 163f41e7005..6f7fcad306f 100644 --- a/packages/thumbnail/package.json +++ b/packages/thumbnail/package.json @@ -67,9 +67,6 @@ "@spectrum-web-components/base": "1.6.0", "@spectrum-web-components/opacity-checkerboard": "1.6.0" }, - "devDependencies": { - "@spectrum-css/thumbnail": "8.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/thumbnail/src/spectrum-config.js b/packages/thumbnail/src/spectrum-config.js deleted file mode 100644 index 78fbfe179ec..00000000000 --- a/packages/thumbnail/src/spectrum-config.js +++ /dev/null @@ -1,58 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Thumbnail'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/thumbnail', - outPackage: 'thumbnail', - fileName: 'thumbnail', - components: [ - converter.classToHost(), - converter.classToAttribute('is-selected', 'selected'), - converter.classToAttribute('is-focused', 'focused'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.classToAttribute('spectrum-Thumbnail--cover'), - converter.classToAttribute('spectrum-Thumbnail-layer'), - ...converter.enumerateAttributes( - [ - ['spectrum-Thumbnail--size50', '50'], - ['spectrum-Thumbnail--size75', '75'], - ['spectrum-Thumbnail--size100', '100'], - ['spectrum-Thumbnail--size200', '200'], - ['spectrum-Thumbnail--size300', '300'], - ['spectrum-Thumbnail--size400', '400'], - ['spectrum-Thumbnail--size500', '500'], - ['spectrum-Thumbnail--size600', '600'], - ['spectrum-Thumbnail--size700', '700'], - ['spectrum-Thumbnail--size800', '800'], - ['spectrum-Thumbnail--size900', '900'], - ['spectrum-Thumbnail--size1000', '1000'], - ], - 'size' - ), - converter.classToClass('spectrum-Thumbnail-background'), - converter.classToClass('spectrum-Thumbnail-image-wrapper'), - converter.classToClass('spectrum-Thumbnail-layer-inner'), - converter.classToSlotted('spectrum-Thumbnail-image'), - ], - }, - ], -}; diff --git a/packages/toast/package.json b/packages/toast/package.json index 5f2c23ba410..ddc833d5cb8 100644 --- a/packages/toast/package.json +++ b/packages/toast/package.json @@ -70,9 +70,6 @@ "@spectrum-web-components/icons-workflow": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/toast": "11.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/toast/src/spectrum-config.js b/packages/toast/src/spectrum-config.js deleted file mode 100644 index a48395267bf..00000000000 --- a/packages/toast/src/spectrum-config.js +++ /dev/null @@ -1,91 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Toast'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/toast', - outPackage: 'toast', - fileName: 'toast', - components: [ - converter.classToHost(), - ...converter.enumerateAttributes( - [ - ['spectrum-Toast--negative'], - ['spectrum-Toast--positive'], - ['spectrum-Toast--info'], - ['spectrum-Toast--error'], - ['spectrum-Toast--warning'], - ['spectrum-Toast--success'], - ], - 'variant' - ), - converter.classToClass('spectrum-Toast-body'), - converter.classToClass('spectrum-Toast-buttons'), - converter.classToClass('spectrum-Toast-content'), - converter.classToClass('spectrum-Toast-typeIcon', 'type'), - converter.classToClass('spectrum-Toast-closeButton'), - { - find: [ - // .spectrum-Toast-body .spectrum-Button:dir(rtl) - builder.class('spectrum-Toast-body'), - builder.combinator(' '), - builder.class('spectrum-Button'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - replace: [ - // .body ::slotted([slot='action']:dir(rtl)) - { - replace: builder.class('body'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: { - type: 'pseudo-element', - kind: 'slotted', - selector: [ - builder.attribute('slot', 'action'), - { - type: 'pseudo-class', - kind: 'dir', - direction: 'rtl', - }, - ], - }, - }, - ], - collapseSelector: true, - }, - converter.classToSlotted('spectrum-Button', 'action'), - ], - }, - ], -}; - -export default config; diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index 094c07353f5..7f9d612ec68 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -73,9 +73,6 @@ "@spectrum-web-components/reactive-controllers": "1.6.0", "@spectrum-web-components/shared": "1.6.0" }, - "devDependencies": { - "@spectrum-css/tooltip": "7.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/tooltip/src/spectrum-config.js b/packages/tooltip/src/spectrum-config.js deleted file mode 100644 index 02dd45d53ed..00000000000 --- a/packages/tooltip/src/spectrum-config.js +++ /dev/null @@ -1,168 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Tooltip'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -export default { - conversions: [ - { - inPackage: '@spectrum-css/tooltip', - outPackage: 'tooltip', - fileName: 'tooltip', - excludeByComponents: [builder.class('u-tooltip-showOnHover')], - components: [ - converter.classToId('spectrum-Tooltip', 'tooltip'), - converter.classToAttribute('is-open', 'open'), - { - find: [builder.class('spectrum-Tooltip--top')], - replace: [ - { - replace: builder.attribute( - 'placement', - 'top', - 'substring' - ), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--bottom')], - replace: [ - { - replace: builder.attribute( - 'placement', - 'bottom', - 'substring' - ), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--left')], - replace: [ - { - replace: builder.attribute( - 'placement', - 'left', - 'substring' - ), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--right')], - replace: [ - { - replace: builder.attribute( - 'placement', - 'right', - 'substring' - ), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--info')], - replace: [ - { - replace: builder.attribute('variant', 'info'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--positive')], - replace: [ - { - replace: builder.attribute('variant', 'positive'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - { - find: [builder.class('spectrum-Tooltip--negative')], - replace: [ - { - replace: builder.attribute('variant', 'negative'), - }, - { - replace: builder.combinator(' '), - }, - { - replace: builder.id('tooltip'), - }, - ], - expandSelector: true, - }, - converter.classToId('spectrum-Tooltip-label'), - converter.classToId('spectrum-Tooltip-tip'), - converter.classToSlotted('spectrum-Tooltip-typeIcon', 'icon'), - { - find: { - type: 'pseudo-class', - kind: 'lang', - }, - hoist: true, - }, - ], - }, - ], -}; diff --git a/packages/tray/package.json b/packages/tray/package.json index d86e56e0918..8119ff9d159 100644 --- a/packages/tray/package.json +++ b/packages/tray/package.json @@ -70,9 +70,6 @@ "@spectrum-web-components/shared": "1.6.0", "@spectrum-web-components/underlay": "1.6.0" }, - "devDependencies": { - "@spectrum-css/tray": "5.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/tray/src/spectrum-config.js b/packages/tray/src/spectrum-config.js deleted file mode 100644 index 4692c05b3e6..00000000000 --- a/packages/tray/src/spectrum-config.js +++ /dev/null @@ -1,72 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { - builder, - converterFor, -} from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor(''); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/tray', - outPackage: 'tray', - fileName: 'tray-wrapper', - components: [ - converter.classToHost('spectrum-Tray-wrapper'), - converter.classToAttribute('is-open', 'open'), - ], - excludeByComponents: [builder.class('spectrum-Tray')], - }, - { - inPackage: '@spectrum-css/tray', - outPackage: 'tray', - fileName: 'tray', - hoistCustomPropertiesFrom: 'spectrum-Tray', - components: [ - { - find: [ - builder.class('spectrum-Tray'), - builder.class('is-open'), - ], - replace: [ - { - replace: builder.attribute('open'), - hoist: true, - }, - { - replace: { - type: 'combinator', - value: 'descendant', - }, - }, - { - replace: builder.class('tray'), - }, - ], - }, - converter.classToClass('spectrum-Tray', 'tray'), - converter.classToSlotted('spectrum-Dialog'), - converter.classToAttribute('is-open', 'open'), - ], - excludeByComponents: [builder.class('spectrum-Tray-wrapper')], - }, - ], -}; - -export default config; diff --git a/packages/underlay/package.json b/packages/underlay/package.json index d3f15946796..3a9cdfd5db1 100644 --- a/packages/underlay/package.json +++ b/packages/underlay/package.json @@ -66,9 +66,6 @@ "dependencies": { "@spectrum-web-components/base": "1.6.0" }, - "devDependencies": { - "@spectrum-css/underlay": "6.1.0" - }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ diff --git a/packages/underlay/src/spectrum-config.js b/packages/underlay/src/spectrum-config.js deleted file mode 100644 index 3f74919f915..00000000000 --- a/packages/underlay/src/spectrum-config.js +++ /dev/null @@ -1,35 +0,0 @@ -// @ts-check -/* -Copyright 2023 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the 'License'); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -import { converterFor } from '../../../tasks/process-spectrum-utils.js'; - -const converter = converterFor('spectrum-Underlay'); - -/** - * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter } - */ -const config = { - conversions: [ - { - inPackage: '@spectrum-css/underlay', - outPackage: 'underlay', - fileName: 'underlay', - components: [ - converter.classToHost(), - converter.classToAttribute('is-open', 'open'), - ], - }, - ], -}; - -export default config; diff --git a/projects/documentation/content/guides/adding-component.md b/projects/documentation/content/guides/adding-component.md index 65d9b61acc1..f948cbddde5 100644 --- a/projects/documentation/content/guides/adding-component.md +++ b/projects/documentation/content/guides/adding-component.md @@ -10,11 +10,6 @@ slug: developing-component This guide explains the techniques involved in the ongoing development a Spectrum control as a spectrum-web-components. -The components in spectrum-web-components are based on the CSS definitions in -spectrum-css. Typically, component -implementations contain very little code. The CSS from the `spectrum-css` -project typically specifies most, if not all, of the presentation details. - ## What is a web component? According to webcomponents.org, @@ -29,7 +24,6 @@ web components are: In order to add a new component to this library, you will need to develop a working knowledge of the following technologies: -- Spectrum CSS: A CSS implementation of the Spectrum design language - Web Components: Standards based method for adding new HTML tags to a browser - Shadow DOM: The part of the Web Component spec that allows for encapsulation of component styles and child nodes - lit-element: A simple base class for creating fast, lightweight web components @@ -45,81 +39,7 @@ the heart of a web component. It isolates the component from the styles and DOM of the containing page. While this offers many benefits, it also means that we must structure our CSS very differently. -The CSS from the spectrum-css project -is intended to be installed globally on a web page. Using it in the context of a -web component requires that we modify it. To facilitate that, this project comes -with a config-driven processor that can transform the Spectrum CSS into a format -that can be consumed in a web component. - -The first step is to create a directory and a `spectrum-config.js` file for your -new component. This config file contains information about the structure of -the web component in relation to the Spectrum CSS classes. - -Below is a fragment of the `spectrum-config.js` file for `sp-button`. - -```javascript -const config = { - conversions: [ - { - inPackage: '@spectrum-css/button', - outPackage: 'button', - fileName: 'button', - excludeByComponents: [builder.element('a')], - components: [ - converter.classToHost(), - converter.classToAttribute('spectrum-Button--quiet'), - converter.classToAttribute('is-disabled', 'disabled'), - converter.pseudoToAttribute('disabled', 'disabled'), - ...converter.enumerateAttributes( - [ - ['spectrum-Button--sizeS', 's'], - ['spectrum-Button--sizeM', 'm'], - ['spectrum-Button--sizeL', 'l'], - ['spectrum-Button--sizeXL', 'xl'], - ], - 'size' - ), - converter.classToId('spectrum-Button-label'), - converter.classToSlotted('spectrum-Icon', 'icon'), - { - find: [ - builder.class('spectrum-Icon'), - builder.combinator('+'), - builder.class('spectrum-Button-label'), - ], - replace: [ - { - replace: builder.attribute('name', 'icon', 'equal'), - hoist: false, - }, - builder.combinator('+'), - builder.id('label'), - ], - }, - { - hoist: false, - find: builder.pseudoClass('empty'), - replace: builder.attribute('hidden'), - }, - ], - }, - ], -}; -``` - -If we wanted to create a button component using this config file, the steps would be as -follows: - -1. Make the directory `src/components/button` -2. In that new directory, create a `spectrum-config.js` - file with the above contents -3. Run the command `yarn process-spectrum` to create the CSS file - -When you do the above, the config-driven processor -will look in the `spectrum-css` project -for the matching CSS file. -It will parse that file and restructure the CSS as per the configuration -instructions. +For more information on how to structure your CSS, see the [Styling](/guides/styling-components) guide. ## Structure of a Spectrum Web Component @@ -143,214 +63,6 @@ structure that looks like this. If anything here looks unfamiliar, it is probably a good time to do some reading about web components. -You can compare this markup with the reference markup in the `spectrum-css` documentation - -### Host Class Mapping - -We need to determine what the main CSS class is for our component in the -original `spectrum-css`. In the case of `sp-button`, we can see that the -top-level class is `.Spectrum-Button`. We then need to determine where we want -that CSS to be applied. In many cases, you will want that CSS to be applied to -the actual web component via the `:host` selector. That is the default behaviour -of the conversion script. In this case, we wanted to preserve all of the default -behaviour of the `button` element in HTML. So, we want the main CSS to be -applied to our `